CSS Selectors

CSS Selectors

CSS selectors identify specific HTML elements as targets for CSS styles. 

This topic covers how CSS selectors target HTML elements. 

Selectors use a wide range of over 50 selection methods offered by the CSS language, including elements, classes, IDs, pseudo-elements and pseudo-classes, and pattern

Now we will all types of Selectors with there description in CSS - 

1.  “*” -  Universal selector (all elements)(denoted by *)
2.  div -  Tag selector (all
   elements)
3.  .fruit -  Class selector (all elements with class fruit)(denoted by “.” dot )
4.  .fruit.apple -  All elements with class fruit and apple(a type of Compound selector)
5.  #headline  - ID selector (the element with "id" attribute set to headline)(denoted by “#” )
6.  :pseudo-class -   All elements with pseudo-class(denoted by colon “:” )
7.  ::pseudo-element -  Element that matches pseudo-element (denoted by double colon “::”)
8.  :lang(en)  -  Element that matches :lang declaration, for example
9. div > p  - child selector (denoted by “>”).

Note - 

The value of an ID must be unique in a web page. It is a violation of the HTML standard to use the value of an ID more than once in the same document tree.

Now we will see some Examples  - 

Example 1 - Selecting element p which is for selecting paragraphs.

Output - 

Example 2 - example for id selector

Output - 
 

Example 3 - Example for class selector

Output - 

 

Example 4 -  There may be many classes of a p tag, here selecting a particular class of p tag

Output - 

Example 5 - Now we will see universal selector

Output - 

Example 6 - We can select multiple elements at once as well - 

Output -