Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Advanced Selectors in CSS
Advanced CSS selectors provide powerful ways to target specific HTML elements based on their relationships, attributes, and positions. These selectors go beyond basic element, class, and ID selectors to offer more precise control over styling.
Syntax
/* Adjacent Sibling Selector */
element1 + element2 { }
/* General Sibling Selector */
element1 ~ element2 { }
/* Direct Child Selector */
parent > child { }
/* Attribute Selector */
element[attribute="value"] { }
/* Nth-of-type Selector */
element:nth-of-type(n) { }
Types of Advanced Selectors
| Selector | Syntax | Description |
|---|---|---|
| Adjacent Sibling | A + B |
Selects B that immediately follows A |
| General Sibling | A ~ B |
Selects all B elements that follow A |
| Direct Child | A > B |
Selects B that are direct children of A |
| Attribute | [attribute="value"] |
Selects elements with specific attribute values |
| Nth-of-type | :nth-of-type(n) |
Selects the nth element of its type |
Example
The following example demonstrates various advanced selectors in action −
<!DOCTYPE html>
<html>
<head>
<style>
#red {
color: red;
}
.green {
background-color: green;
color: white;
}
ul:nth-of-type(1) {
background-color: rgb(0, 174, 255);
padding: 10px;
}
ul + h3 {
border: 4px solid rgb(19, 0, 128);
padding: 5px;
}
a[href="https://www.wikipedia.org"] {
font-size: 25px;
color: orange;
}
h1 ~ h3 {
font-size: 40px;
}
div > span {
background-color: DodgerBlue;
color: white;
padding: 2px;
}
</style>
</head>
<body>
<h1>Advanced Selectors Example</h1>
<ul>
<li>Cow</li>
<li>Dog</li>
<li>Cat</li>
</ul>
<ul>
<li>Puma</li>
<li>Leopard</li>
<li>Cheetah</li>
</ul>
<h3>Animals</h3>
<div>
<span>Direct child span</span>
<p>
Paragraph Text
<span>Nested span text</span>
</p>
<p class="green">Green paragraph</p>
<p id="red">Red paragraph</p>
<p class="green">Another green paragraph</p>
</div>
<a href="https://www.google.com">www.google.com</a>
<a href="https://www.wikipedia.org" target="_blank">www.wikipedia.org</a>
</body>
</html>
The page displays a heading followed by two lists. The first list has a blue background. The h3 heading "Animals" has a dark blue border. Below that, a div contains spans and paragraphs with various styling. The direct child span has a blue background, green paragraphs have green backgrounds, and the red paragraph has red text. The Wikipedia link appears larger in orange.
Key Points
- Adjacent sibling selector (+): Targets only the immediately following sibling
- General sibling selector (~): Targets all following siblings of the same type
- Child selector (>): Selects direct children only, not nested descendants
- Attribute selectors: Can target elements based on attribute presence or specific values
- Pseudo-selectors: Like :nth-of-type() provide positional targeting
Conclusion
Advanced CSS selectors offer precise control over element targeting based on relationships, attributes, and positions. They enable more specific styling without adding extra classes or IDs to HTML markup.
Updated on: 2026-03-15T15:08:52+05:30
856 Views
Advertisements