CSS Selectors and Pseudo Classes,Elements

0 41

CSS Selectors Type Comments Pseudo Classes Elements css Class ID

in this tutorial I will teach you about CSS Selectors Type Comments Pseudo Classes Elements css Class ID 

CSS Selectors

Selectors used in CSS to point a HTML element which user want to apply CSS style.

There are three types Selectors and they are…

  • Type selector
  • Class selector
  • ID selector
  • Universal selector

Type selector

Type selector directly specifies the element in CSS to apply effects/style.By applying Style through Type selector will apply style to all same name elements in HTML web page for example if you applied style to H1 heading it will apply same style to all H1 headings in your web page.

Class Selector

To point any HTML element for apply style Class Selector can also be used. In span or div elements you can specify Class name.A Class Selector starts in CSS with period “.” followed by Class name which we specified in span/div elements.

ID Selector

To point any HTML element to apply style ID Selector can also be used. In span or div elements you can specify ID name.the ID Selector starts in CSS with the hash symbol (#) followed by ID name which you specified in span/div elements.

Universal Selector

Universal Selector used to apply the style to all elements in a page.An asterisk (*) sign is used as a Universal Selector .

Grouping and Nesting of Selectors

In many cases we need to apply the same style to many elements by grouping them at one.this will reduce codes and effort.
We can group many selectors. Separate each selector with the comma.

We can also apply the style to a selector within a selector in this example we applied the style to h2 which is nested in p tag.

CSS Comments

Comments are the special character which browser can’t read and show in browser, comments are only for the developer to help debug or to reuse his/her codes. we can use comments to a single line or to multi lines
We can apply comment in CSS like this way /* and */.

CSS Pseudo Classes

A web page consists of multiple pages linked through hyperlinks For example by mistake you clicked again that page which you already have surfed in this case you might feel visited link should look like different than others so don’t worry this is possible in CSS through Pseudo Classes.
Different types of elements state are

State Description
active This state will define the element activated by the user.
hover Defines a style to the elements when the mouse pointer is moved over.
link the link will define a style for the unvisited hyperlink.
Visited Visited will define a style for visited hyperlink.

lists of selector name and its descriptions.

Selector Name Description
:link :link Selector for selecting all unvisited links
:visited :visited Selector for selecting all visited links
:active :active Selector for selecting the active link
:hover :hover Selector for selecting links on mouse over
:focus :focus Selector for selecting the input element which has focus
:first-letter To select a first letter of every <p> element :first-letter selector used
:first-line To select a first letter of every <p> element :first-line selector used
:first-child To select a every first child of parents of <p> elements :first-child Selector is used
:before To insert a content before every <p> elements :before selector used
:after To insert a content after every <p> elements :after selector used
:lang (language) :lang (language) Is used for selecting every <p> element with a lang attribute value

Pseudo Elements

Purpose of Pseudo Elements

For example, you are creating a website and defining an important technical terms in the page while defining important technical terms you might feel to applying a different style emphasize on the first letter.it will be so difficult to you to apply a style on the first letter of a paragraph to achieve this Pseudo-elements used in CSS.

Pseudo Elements

The :first-line allow to you apply the style to the first line of the paragraph and :first-letter allows you to apply the style to the first letter in a line or a paragraph.

:first-line

You can apply a style to the first line using :first-line Pseudo-element.

:first-letter

You can apply the style to the first letter by using :first-letter Pseudo-element.

Comments

comments

Leave A Reply

Your email address will not be published.