HTML 5

Selectors in CSS 3

This article is about CSS selectors and how they work. The following is an explanation of most of the selectors used in CSS.

In the following, first is a CSS example and then the corresponding HTML code on which it will work, so to try it yourself create a HTML page and put the CSS as well as the related HTML in it and see the results. In most of the selects I provided a demo link where you can visit and see the results.

In the following article you might find a new CSS selector that are part of the new CSS3. All of the following examples and demos have been tried by me on the latest Chrome version.


.Class: Selects all the elements with the given class name.

CSS
  1. .MyIntro  
  2. {  
  3.   font:15px arial,sans-serif;  
  4.   color:red;  
  5. }  
Use
  1. <div class="MyIntro">  
  2. <p>My name is Pranay Rana.</p>  
  3. <p>I am working as Soft Engg.</p>  
  4. </div>  

#id: Selects all the elements with the given id name.

CSS
  1. #MyIntro  
  2. {  
  3.  font:15px arial,sans-serif;  
  4.  color:red;  
  5. }    
Use
  1. <div id="MyIntro">  
  2. <p>My name is Pranay Rana.</p>  
  3. <p>I am working as Soft Engg.</p>  
  4. </div>  
Point to note: You can have more than one element having the same classname in the HTML page but you can have only one element with the ID.

HTMLElement: Selects all the HTML elements that the name is given.

CSS
  1. P  
  2.  {  
  3.   font:15px arial,sans-serif;  
  4.   color:red;  
  5.  }  
Use
  1. <div>  
  2. <p>My name is Pranay Rana.</p>  
  3. <p>I am working as Soft Engg.</p>  
  4. </div>  

HtmlElement HtmlElemnt: Selects all the HTML elements that are in a HTML element.

CSS
  1. div p  
  2.  {  
  3.   font:15px arial,sans-serif;  
  4.   color:red;  
  5.  }  
Use
  1. <div >  
  2. <p>My name is Pranay Rana.</p>  
  3. <Span>  
  4.  <p> data </p>  
  5. </Span>  
  6. </div>  
  7. <p>I am working as Soft Engg.</p>  
In this example all p elements inside a div are highlighted with the red color, but the p element outside the div isn't affected.

HtmlElement > HtmlElemnt: Selects all the HTML elements that are children of the HTML element.

CSS
  1. div > p  
  2. {  
  3.   font:15px arial,sans-serif;  
  4.   color:red;  
  5. }  
Use
  1. <div >  
  2. <p>My name is Pranay Rana.</p>  
  3. <Span>  
  4.  <p> data </p>  
  5. </Span>  
  6. </div>  
  7. <p>I am working as Soft Engg.</p>  
In this example all p elements that are children of a div are highlighted with the red color, but the p elements that are not children of the div isn't affected.

Demo

HtmlElement + HtmlElemnt: Selects all the HTML elements that are immediately after a HTML element.

CSS
  1. div + p  
  2. {  
  3.   font:15px arial,sans-serif;  
  4.   color:red;  
  5. }  
Use
  1. <div >  
  2. <p>My name is Pranay Rana.</p>  
  3. </div>  
  4. <p>I am working as Soft Engg.</p>  
  5. <p> data </p>  

In this example a p element that is immediately after a div is highlighted with the red color, in this example the text "I am working as Soft Engg." is highlighted.

Demo

HtmlElement ~ HtmlElemnt: Selects all the HTML elements that precede a HTML element.

CSS
  1. div ~ p  
  2. {  
  3.   font:15px arial,sans-serif;  
  4.   color:red;  
  5. }  
Use
  1. <div >  
  2. <p>My name is Pranay Rana.</p>  
  3.     <span>  
  4.         <p> data </p>  
  5.   </span>   
  6. </div>  
  7. <p>I am working as Soft Engg.</p>  
  8. <p>My Demo Page.</p>  
In this example the p element that precedes a div is highlighted with the red color, in this example the text "I am working as Soft Engg." and "My Demo Page." is highlighted.

Demo

[attribute]: Selects all the HTML elements that have an attribute.

CSS
  1. [data-name]  
  2. {  
  3.   font:15px arial,sans-serif;  
  4.   color:red;  
  5. }  
Use
  1. <div >  
  2. <p data-name="pranay">My name is Pranay Rana.</p>  
  3.     <span>  
  4.         <p> data </p>  
  5.   </span>   
  6. </div>  
  7. <p>I am working as Soft Engg.</p>  
  8. <p data-name="demo">My Demo Page.</p>  
In this example any element that has the attribute "data-name"div is highlighted with the red color, in this example the text "My name is Pranay Rana." and "My Demo Page." is highlighted.

Demo

[attribute = data]: Selects all the HTML elements with an attribute value equal to data.

CSS
  1. [data-name = 'demo']  
  2. {  
  3.   font:15px arial,sans-serif;  
  4.   color:red;  
  5. }  
Use
  1. <div >  
  2. <p data-name="pranay">My name is Pranay Rana.</p>  
  3.     <span>  
  4.         <p> data </p>  
  5.   </span>   
  6. </div>  
  7. <p>I am working as Soft Engg.</p>  
  8. <p data-name="demo">My Demo Page.</p>  
In this example any element that has the attribute "data-name" and the value = "demo" is highlighted with the red color, in this example the text "My Demo Page." is highlighted.

Demo

[attribute ^= data]: Selects all the HTML elements where the attribute value begins with data.

CSS
  1. [data-name ^= 'pra']  
  2. {  
  3.   font:15px arial,sans-serif;  
  4.   color:red;  
  5. }  
So with the preceding HTML when applying this the text "My name is Pranay Rana." is highlighted because its "data-name" attribute value begins with "pra".

Demo

[attribute $= data]: Selects all the HTML elements where the attribute value ends with data.

CSS
  1. [data-name ^= 'pra']  
  2. {  
  3.   font:15px arial,sans-serif;  
  4.   color:red;  
  5. }  
So with the preceding HTML when applying this the text "My name is Pranay Rana." is highlighted because its "data-name" attribute value ends with "nay".

Demo

[attribute *= data]: Selects all the HTML elements where an attribute value contains data.

CSS
  1. [data-name *= 'rana']  
  2. {  
  3.   font:15px arial,sans-serif;  
  4.   color:red;  
  5. }  
So with the preceding HTML when apply this the text "My name is Pranay Rana." is highlighted because its "data-name" attribute value contains "rana".

Demo

[attribute ~= data]: Selects all the HTML elements where an attribute value contains word data.

CSS
  1. [data-name ~= 'page']  
  2. {  
  3.   font:15px arial,sans-serif;  
  4.   color:red;  
  5. }  
Use
  1. <div >  
  2. <p data-name="pranay_page">My name is Pranay Rana.</p>  
  3.     <span>  
  4.         <p> data </p>  
  5.   </span>   
  6. </div>  
  7. <p>I am working as Soft Engg.</p>  
  8. <p data-name="demo page">My Demo Page.</p>  
In this example any element where an attribute "data-name" value contains word = "page" is highlighted with the red color, in this example the text "My Demo Page." is highlighted.

Demo

:first-child: Select the first element (first child) of a parent.

CSS
  1. li:first-child  
  2. {  
  3.   font:15px arial,sans-serif;  
  4.   color:red;  
  5. }  
Use
  1. <ul>  
  2.     <li>item1</li>  
  3.     <li>item2</li>  
  4.     <li>item3</li>  
  5.     <li>item4</li>  
  6. </ul>  
In this example the "item1" element is highlighted with the red color.

Demo

:last-child: Select the last element (last child) of a parent.

CSS
  1. li:last-child  
  2. {  
  3.   font:15px arial,sans-serif;  
  4.   color:red;  
  5. }  
Use
  1. <ul>  
  2.     <li>item1</li>  
  3.     <li>item2</li>  
  4.     <li>item3</li>  
  5.     <li>item4</li>  
  6. </ul>  
In this example the "item4" element is highlighted with the red color.

Demo

:nth-child(n): Select each element that is the number n child of a parent.

CSS
  1. li:nth-child(2)  
  2. {  
  3.   font:15px arial,sans-serif;  
  4.   color:red;  
  5. }  
Use
  1. <ul>  
  2.     <li>item1</li>  
  3.     <li>item2</li>  
  4.     <li>item3</li>  
  5.     <li>item4</li>  
  6. </ul>  
In this example the "second li" element is highlighted with the red color, in this example the text "item2" is highlighted.

Demo

:nth-last-child(n): Select each element of the last n children of a parent counting from the bottom.

CSS
  1. li:nth-last-child(2)  
  2. {  
  3.   font:15px arial,sans-serif;  
  4.   color:red;  
  5. }  

Use

  1. <ul>  
  2.     <li>item1</li>  
  3.     <li>item2</li>  
  4.     <li>item3</li>  
  5.     <li>item4</li>  
  6. </ul>  

In this example the "second last li" element is highlighted with the red color, in this example the text "item3" is highlighted

Demo


:only-child: Select the child element that is the only child of the parent.

CSS
  1. p:only-child  
  2. {  
  3.   font:15px arial,sans-serif;  
  4.   color:red;  
  5. }  
Use
  1. <div>  
  2.     <p> pragraph 1</p>  
  3. </div>   
  4. <div>  
  5.     <p> pragraph 2</p>  
  6.     <p> pragraph 3</p>  
  7.     <p> pragraph 4</p>  
  8. </div>  
In this example the "paraghaph 1" element is highlighted with the red color that is the only child of the div element.

Demo

:first-of-type: Select the first element of a given type that is the first under the parent element.

CSS
  1. p:first-of-type  
  2. {  
  3.   font:15px arial,sans-serif;  
  4.   color:red;  
  5. }  
Use
  1. <div>  
  2.     <p> pragraph 1</p>  
  3.     <p> pragraph 2</p>  
  4.     <p> pragraph 3</p>  
  5. </div>  
In this example the "paragraph 1" element is highlighted with the red color.

Demo

:last-of-type: Selects the last element of a given type that is the last under a parent element.

CSS
  1. p:last-of-type  
  2. {  
  3.   font:15px arial,sans-serif;  
  4.   color:red;  
  5. }  
Use
  1. <div>  
  2.     <p> pragraph 1</p>  
  3.     <p> pragraph 2</p>  
  4.     <p> pragraph 3</p>  
  5. </div>  
In this example the "paragraph 1" element is highlighted with the red color, that means here "pragraph 1" is the first element of the type p under the div.

Demo

:nth-of-type(n): Select the nth element of a given type that is at the nth place under a parent element.

CSS
  1. p:nth-of-type(2)  
  2. {  
  3.   font:15px arial,sans-serif;  
  4.   color:red;  
  5. }  
Use
  1. <div>  
  2.     <p> pragraph 1</p>  
  3.     <p> pragraph 2</p>  
  4.     <p> pragraph 3</p>  
  5.     <p> pragraph 4</p>  
  6.   
  7. </div>   
In this example the "paragraph 2" element is highlighted with the red color, that means here "pragraph 2" is the second element of type p under the div.

Demo

:nth-last-of-type(n): Select the nth last element of a given type that is at the nth place under a parent element from the last.

CSS
  1. p:nth-last-of-type(2)  
  2. {  
  3.   font:15px arial,sans-serif;  
  4.   color:red;  
  5. }  
Use
  1. <div>  
  2.     <p> pragraph 1</p>  
  3.     <p> pragraph 2</p>  
  4.     <p> pragraph 3</p>  
  5.     <p> pragraph 4</p>  
  6. </div>  


In this example the "paragraph 3" element is highlighted with the red color, that means here "pragraph 3" is the last element of type p under the div from the last.

Demo

:only-of-type: Select only an element of a given type that is under a parent element.

CSS
  1. p:only-of-type  
  2. {  
  3.   font:15px arial,sans-serif;  
  4.   color:red;  
  5. }  
Use
  1. <div>  
  2.     <p> pragraph 1</p>  
  3. </div>   
  4. <div>  
  5.     <p> pragraph 2</p>  
  6.     <p> pragraph 3</p>  
  7.     <p> pragraph 4</p>  
  8. </div>   
In this example the "paragraph 1" element is highlighted with the red color, because p is the only element of the given type.

Demo

:empty: Selects an element that is empty, in other words doesn't have a child.

CSS
  1. div:empty  
  2. {  
  3.   width:100px;  
  4. height:20px;  
  5. background:red;  
  6. }  
Use
  1. <div></div>   
  2. <div>  
  3.     <p> pragraph 2</p>  
  4.     <p> pragraph 3</p>  
  5.     <p> pragraph 4</p>  
  6. </div>   
In this all the text in the document is highlighted with the red color.

Demo

::selection: Highlights the text with the color selected.

CSS
  1. ::selection  
  2. {  
  3.   background:green;  
  4. }  
Use
  1. <div> <p> pragraph 1</p> </div>   
  2.    <div>  
  3.     <p> pragraph 2</p>  
  4.     <p> pragraph 3</p>  
  5.     <p> pragraph 4</p>  
  6. </div>     
In this all the text is highlighted with green that is selected in the document.

Demo

:not(HTMLElement): does not apply the style to the specified HTMLElement.

CSS
  1. :not(span)  
  2. {  
  3.   font:15px arial,sans-serif;  
  4.   color:red;  
  5. }  
  6. span  
  7. {  
  8.   color:black;  
  9. }  
Use
  1. <p> pragraph 1</p>  
  2. <p> pragraph 2</p>  
  3. <p> pragraph 3</p>  
  4. <p> pragraph 4</p>  
  5. <span> span data</span>   
 In this all the text in the p element is highlighted, in other words the style of the span element is not applied.

Demo

:enable: select all enabled elements.
:disable: select all disabled elements.

CSS
  1. :input[type="text"]:enabled  
  2. {  
  3. background:green;  
  4. }  
  5. input[type="text"]:disabled  
  6. {  
  7. background:red;  
  8. }  
Use
  1. Name: <input type="text" value="Pranay Rana" /><br>  
  2. Country: <input type="text" disabled="disabled" value="India" />   
 Here Name is highlighted with the red color and the country box is highlighted with green.

Demo

Conclusion

Most of the selectors are new here. Those are part of CSS3, I hope this is helpful and easy to understand. I covered most of the CSS selectors here but if there is something missing please place a comment below regarding it.

Leave a comment if you have any query or if you like it. Prelease report if any link is not working or is broken.

Up Next
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    Sign-Up Now

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    Sign-Up Now

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    Sign-Up Now

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs