Advanced Selectors in CSS

Selectors are used for selecting the HTML elements in the attributes. Some different types of selectors are given below:

  1. Adjacent Sibling Selector: It selects all the elements that are adjacent siblings of specified elements. It selects the second element if it immediately follows the first element.
    Syntax: It select ul tags which immediately follows the h4 tag.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    h4+ul{
        border: 4px solid red;
    }            

    chevron_right

    
    

    Example:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
       <head>
          <title>adjacent</title>
          <style type="text/css">
             ul+h4{
             border:4px solid red;
             }
          </style>
       </head>
       <body>
          <h1>GeeksForGeeks</h1>
          <ul>
             <li>Language</li>
             <li>Concept</li>
             <li>Knowledge</li>
          </ul>
          <h4>Coding</h4>
          <h2>Time</h2>
       </body>
    </html>

    chevron_right

    
    

    Output:

  2. Attribute Selector: It selects a particular type of inputs.
    Syntax:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    input[type="checkbox"]{
        background:orange;
    }

    chevron_right

    
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
       <head>
          <title>Attribute</title>
          <style type="text/css">
             a[href="http://www.google.com"]{
             background:yellow;
             }
          </style>
       </head>
       <body>
          <a href="http://www.geeksforgeeks.org">geeksforgeeks.com</a><br>
          <a href="http://www.google.com" target="_blank">google.com</a><br>
          <a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
       </body>
    </html>

    chevron_right

    
    

    Output:

  3. nth-of-type Selector: It selects an element from its position and types.
    Syntax: Select a particular number tag to make changes.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    div:nth-of-type(5){
        background:purple;
    }

    chevron_right

    
    

    If we want to make canges in all even li.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    li:nth-of-type(even){
        background: yellow;
    }

    chevron_right

    
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
       <head>
          <title>nth</title>
          <style type="text/css">
             ul:nth-of-type(2){
             background:yellow;
             }
          </style>
       </head>
       <body>
          <ul>
             <li>java</li>
             <li>python</li>
             <li>C++</li>
          </ul>
          <ul>
             <li>HTML</li>
             <li>CSS</li>
             <li>PHP</li>
          </ul>
          <ul>
             <li>C#</li>
             <li>R</li>
             <li>Matlab</li>
          </ul>
       </body>
    </html>

    chevron_right

    
    

    Output:


  4. Direct Child Selector: It selects any element matching the second element that is a direct child of an element matching the first element. The element matched by the second selector must be the immediate children of the elements matched by the first selector.
    Syntax:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    p > div {
        background-color: DodgerBlue;
    }

    chevron_right

    
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
       <head>
          <title>child combinator</title>
          <style type="text/css">
             div > span {
             background-color: DodgerBlue;
             }
          </style>
       </head>
       <body>
          <div>
             <span>inside div and is inside span</span>
             <p>inside div but not inside span
                <span>inside div p</span>
             </p>
          </div>
          <span>not inside div</span>
       </body>
    </html>

    chevron_right

    
    

    Output:

    It is different from the Descendant selector as the Descendant selector selects that element matching the second element that is a descendant of the element matching the first element ( that can be the child, a child of its child etc ).

  5. General Sibling Selector: It selects only the first element if it follows the first element and both children are of the same parent element. It is not necessary that the second element immediately follows the first element.
    Syntax: Changes to the span element content which follows paragraph tag and both have same parent tag.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    p ~ span {
        color: red;
    }

    chevron_right

    
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
       <head>
          <title></title>
          <style type="text/css">
             p ~ span {
             color: red;
             }
          </style>
       </head>
       <body>
          <p>Coding is 
             <span>fun!</span>
          </p>
          <h1>GeeksforGeeks</h1>
          <p>learn</p>
          <span>Last span tag.</span>
       </body>
    </html>

    chevron_right

    
    

    Output:

  6. Element Selector: It selects the text enclosed inside the mentioned element.
    Syntax:


    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    div {
        background:green;
    }
      
    p {
        color: yellow;
    }

    chevron_right

    
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
       <head>
          <title></title>
          <style type="text/css">
             div {
             background:purple;
             }
             p {
             color: yellow;
             }
          </style>
       </head>
       <body>
          <div>
             This is inside div element.
             <p>Coding is fun!
                GeeksforGeeks learn Last span tag.
             </p>
             div element is closing 
          </div>
       </body>
    </html>

    chevron_right

    
    

    Output:

  7. ID Selector: It selects the changes made to a specific text on a page as it can be used only once on a page.
    Syntax:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    # special {
        color: yellow;
    }

    chevron_right

    
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
       <head>
          <title></title>
          <style type="text/css">
             #special {
             color: blue;
             }
          </style>
       </head>
       <body>
          <div>
             This is inside div element.
             <p>Coding is fun!</p>
             <p>This is a paragraph.</p>
             <p id="special">This paragraph is with "special" id.</p>
             div element is closing 
          </div>
       </body>
    </html>

    chevron_right

    
    

    Output:

  8. Class Selector: It is same as ID selector but it can be used a number of times in a page.
    Syntax:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    .highlight {
        background: yellow;
    }

    chevron_right

    
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
       <head>
          <title></title>
          <style type="text/css">
             .highlight {
             background: yellow;
             
             p {
             background: blue;
             }
          </style>
       </head>
       <body>
          <p class="highlight"> This is inside the highlight</p>
          <p>This is normal paragraph.</p>
       </body>
    </html>

    chevron_right

    
    

    Output:


  9. Star Selector: The changes made will be made to whole page.
    Syntax:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    *{
        border:1px solid lightgrey;
    }

    chevron_right

    
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
       <head>
          <title></title>
          <style type="text/css">
             *{
             border:1px solid lightgrey;
             }
          </style>
       </head>
       <body>
          <p class="highlight"> This is inside the highlight</p>
          <p>This is normal paragraph.</p>
       </body>
    </html>

    chevron_right

    
    

    Output:

  10. Decendant Selector: It makes changes only to those elements which are inside the other element.
    Syntax: Select all the anchor tags which are inside ‘li’ element which are inside ‘ul’ element.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    ul li a{
        color: red;
    }

    chevron_right

    
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
       <head>
          <title></title>
          <style type="text/css">
             ul li a{
             color:red;
             }
          </style>
       </head>
       <body>
          <ul>
          <li> This is inside first li element.</li>
          <li>Coding is fun!
          <li>
          <li><a href="www.google.com">Click here to go to google.</a></li>
          <li>The last li.</li>
       </body>
    </html>

    chevron_right

    
    

    Output:

  11. All the Selectors are used together in the following Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <html>
       <head>
          <title>nth</title>
          <style type="text/css">
             #special{
             color:red;
             }
             .highlight{
             background: green;
             }
             ul:nth-of-type(2){
             background:yellow;
             }
             ul+h4{
             border:4px solid purple;
             }
             a[href="http://www.google.com"]{
             background:yellow;
             }
             h1 ~ h4 {
             color: red;
             }
             div > span {
             background-color: DodgerBlue;
             }
          </style>
       </head>
       <body>
          <h1>GeeksForGeeks</h1>
          <ul>
             <li>java</li>
             <li>python</li>
             <li>C++</li>
          </ul>
          <ul>
             <li>HTML</li>
             <li>CSS</li>
             <li>PHP</li>
          </ul>
          <ul>
             <li>C#</li>
             <li>R</li>
             <li>Matlab</li>
          </ul>
          <h4>Coding</h4>
          <div>
             <span>inside div and is inside span</span>
             <p>inside div but not inside span
                <span>inside div paragraph</span>
             </p>
             <p class="highlight">inside div but not outside 
                span with class element.</p>
             <p id="special">inside div but not outside span
                with id element.</p>
             <p class="highlight">inside div but not outside 
                span with another class element.</p>
          </div>
          <a href="http://www.geeksforgeeks.org">click here
                 for geeksforgeeks.com</a>
          <a href="http://www.google.com" target="_blank">
                      click here for google.com</a>
       </body>
    </html>

    chevron_right

    
    

    Output:



My Personal Notes arrow_drop_up

I like to do coding in C++C and java programming languages HTML and CSS always intersts me Sharing knowleged is the best way according to me to increase ones knwoledge

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.