Advanced Selectors in CSS - GeeksforGeeks

17 Sep, 2021
Selectors are used for selecting the HTML elements in the attributes. Some different types of selectors are given below: 
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.
html
h4+ul{    border: 4px solid red;}           
Example:
html
<!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>
Output:
Attribute Selector: It selects a particular type of inputs. Syntax:
html
input[type="checkbox"]{    background:orange;}
Example:
html
<html>   <head>      <title>Attribute</title>      <style type="text/css">         a[href="http://www.google.com"]{         background:yellow;         }      </style>   </head>   <body>      <a href="https://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>
Output: 
nth-of-type Selector: It selects an element from its position and types. Syntax: Select a particular number tag to make changes.
html
div:nth-of-type(5){    background:purple;}
If we want to make changes in all even li.
html
li:nth-of-type(even){    background: yellow;}
Example:
html
<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>
Output: 
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: 
html
p > div {    background-color: DodgerBlue;}
Example:
html
<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>
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 ).
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. 
html
p ~ span {    color: red;}
Example:
html
<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>
Output:
Element Selector: It selects the text enclosed inside the mentioned element. Syntax:
html
div {    background:green;} p {    color: yellow;}
Example:
html
<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>
Output:
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:
html
# special {    color: yellow;}
Example:
html
<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>
Output:
Class Selector: It is same as ID selector but it can be used a number of times in a page. Syntax:
html
.highlight {    background: yellow;}
Example:
html
<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>
Output:
Star Selector: The changes made will be made to whole page. Syntax:
html
*{    border:1px solid lightgrey;}
Example:
html
<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>
Output:
Descendant 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.
html
ul li a{    color: red;}
Example:
html
<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>
Output: 
All the Selectors are used together in the following Example:
html
<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="https://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>
Output: 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
abhishek0719kadiyan
sagar0719kumar
varshagumber28
CSS-Advanced
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?