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
    Ebook Download
    View all
    Learn
    View all
    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

    For Basic members:

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

    $20

    $

    . 00

    monthly

    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

    For Elite members:

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