• Tech
  • Forums
  • Jobs
  • Books
  • Events
  • Videos
  • Live
    • Interviews
    • Certification
    • Training
    • Career
    • Members
    • News
    • Blogs
  • An Article
  • A Blog
  • A Video
  • An Ebook
  • An Interview Question
  • Feed
  • Dashboard
  • Wallet
  • Learn
  • Achievements
  • Network
  • Rewards
  • SharpGPT
  • Premium
  • Register
  • Login
HTML 5

Selectors in CSS 3

  • WhatsApp
  • Pranay Rana
  • 10y
  • 4k
  • 0
  • 1
    • 100
  • Article

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.
Demo

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.

  • .Class Selector
  • CSS
  • CSS selector
  • ID Selector
  • using selector in CSS
Up Next
    Ebook Download
    View all
    C# Corner Ebook
    New Layout Design using HTML and CSS
    Read by 1 people
    Download Now!
    Learn
    View all
    Learn Image
    Learn HTML 5, HTML 5
    Leaderboard
    View all
    Sarthak Varshney

    Sarthak Varshney
    +0
    Deepak Tewatia

    Deepak Tewatia
    +0
    View all
    Yesterday's leader
    Sarthak Varshney  
    Sarthak Varshney
    Pune (India)
    70
    102
    1.7k
    100
    Member of the month
    Rinki  
    Rinki
    Chennai (India)
    15
    5.4k
    14.8k
    50
    Speaker of the month
    Shivam Payasi  
    Shivam Payasi
    C#, .NET
    Chitrakoot (India)
    8
    21.1k
    19.7k
    10
    Upcoming events
    View all
    • The Cloud Show with Magnus Mårtensson ft. Oscar Garcia Colon - Ep: 45
    • Bhubaneswar Chapter
    • Building Websites with Microsoft Power Pages: Exploring WebPage, WebTemplate, and Page Templates - Microsoft Business Application Ep. 25
    Suggested for you
    View all
    Alistair Cook Alistair Cook
    Follow
    Deepak Tewatia Deepak Tewatia
    Follow
    Nitin Pandit Nitin Pandit
    Follow
    James Tomar James Tomar
    Follow
    John Miller John Miller
    Follow

    CSharpBot

    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
    About Us Contact Us Privacy Policy Terms Media Kit Partners C# Tutorials Consultants Ideas Report A Bug FAQs Certifications Sitemap Stories CSharp TV DB Talks Let's React Web3 Universe Interviews.help Jumpstart Blockchain Build with JavaScript

    ©2024 C# Corner.

    All contents are copyright of their authors.