Advanced Selectors in CSS
Last Updated : 20 Jul, 2023
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 selects ul tags that immediately follow the h4 tag.
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 input.
Syntax:
input[type="checkbox"] {
background: orange;
}
Example:
html <!DOCTYPE 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.
div:nth-of-type(5) {
background: purple;
}
If we want to make changes in all even li.
li:nth-of-type(even) {
background: yellow;
}
Example:
html <!DOCTYPE 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:
p>div {
background-color: DodgerBlue;
}
Example:
html <!DOCTYPE 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.
p~span {
color: red;
}
Example:
html <!DOCTYPE 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:
div {
background: green;
}
p {
color: yellow;
}
Example:
html <!DOCTYPE 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:
# special {
color: yellow;
}
Example:
html <!DOCTYPE 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 on a page.
Syntax:
.highlight {
background: yellow;
}
Example:
html <!DOCTYPE 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:
* {
border: 1px solid lightgrey;
}
Example:
html <!DOCTYPE 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.
ul li a {
color: red;
}
Example:
html <!DOCTYPE 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> </ul> </body> </html> Output:
All the Selectors are used together in the following Example:
html <!DOCTYPE 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:
Similar Reads
Using the Tabindex Attribute in Navigation Bars with HTML & CSS The tabindex attribute is used to specify the order in which elements receive focus when the "tab" key is pressed. This allows for improved accessibility and control over the focus order for interactive elements on a webpage.What is tabindex?The tabindex attribute controls whether an element can be
2 min read
Advanced Selectors in CSS 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.
5 min read
Advance CSS Layout with Flexbox Flexbox is a powerful CSS layout model that simplifies the creation of flexible and responsive layouts. It allows you to align and distribute space among items within a container, making complex designs easier to manage.Flexbox is particularly useful for building responsive designs that adapt seamle
4 min read
CSS 2D Transforms A transformation in CSS is used to modify an element by its shape, size and position. It transforms the elements along the X-axis and Y-axis. There are 6 main types of transformation which are listed below:translate()rotate()scale()skewX()skewY()matrix()We will implement all these functions & wi
5 min read
CSS 3D Transforms CSS 3D transforms are used to manipulate HTML elements in three dimensions by rotating them along the x-axis, y-axis, and z-axis. There are three main types of transformation which are listed below:rotateX(): Rotates an element around its X-axis.rotateY(): Causes rotation around the Y-axis.rotateZ()
3 min read
CSS Media Queries CSS Media Queries are used to apply CSS styles according to the screen size.Media queries detect device features like screen width, height, and resolution.Breakpoints define the screen sizes where the design needs to change.They ensure a smooth, user-friendly experience across all devices.Syntax:@me
4 min read
CSS Pagination Pagination is the process of dividing the document into pages and providing them with numbers. Types of Pagination: There are many types of pagination in CSS. Some of them are given below: Simple PaginationActive and Hoverable PaginationRounded Active and Hoverable ButtonsHoverable Transition Effect
7 min read
CSS Gradients CSS gradients allow you to create smooth transitions between two or more colors, making your web elements visually appealing. Each gradient type blends colors in different ways, helping you enhance your designs. Learning how to use them will give you more control over your site's appearance.Types of
7 min read
CSS Shadow Effect The shadow effect property in CSS is used to add shadows to text and images in HTML documents. This enhances the visual appeal and depth of your web elements, making your design more engaging. Text ShadowThe text-shadow property in CSS is used to display text with a shadow. This property defines the
2 min read
CSS Animations CSS animations control the movement and appearance of elements on web pages. We can animate HTML elements without using JavaScript.Use @keyframes to define the animation steps.Apply animations with properties like animation-name and animation-duration.Control the animation flow using animation-timin
7 min read