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
Difference between div~div and div:not(:first-of-type)?
In CSS, both div~div and div:not(:first-of-type) can select the same elements in many cases, but they work differently and have different specificity values.
Understanding the Selectors
The div~div selector uses the general sibling combinator (~) to select any div that comes after another div at the same level. The div:not(:first-of-type) selector targets all div elements except the first one of its type within its parent.
Example Structure
<section> <div></div> <!-- div:first-child or div:first-of-type --> <div></div> <!-- div+div or div~div or div:nth-of-type(2) --> <p></p> <div></div> <!-- div+p+div or div~div or div:nth-of-type(3), but not div+div --> </section> <section> <h1></h1> <!-- h1:first-child --> <div></div> <!-- div:first-of-type or div:nth-child(2) --> <div></div> <!-- div~div or div:nth-of-type(2) or div:nth-child(3) --> </section>
Key Differences
| Aspect | div~div |
div:not(:first-of-type) |
|---|---|---|
| Selection Logic | Selects divs that follow other divs | Selects all divs except the first of its type |
| CSS Specificity | 0,0,0,2 (two type selectors) | 0,0,1,1 (one pseudo-class, one type selector) |
| Requires Sibling | Yes, needs a preceding div | No, works independently |
Practical Example
<!DOCTYPE html>
<html>
<head>
<style>
div~div {
background-color: lightblue;
}
div:not(:first-of-type) {
border: 2px solid red;
}
</style>
</head>
<body>
<section>
<div>First div</div>
<div>Second div</div>
<p>Paragraph</p>
<div>Third div</div>
</section>
</body>
</html>
CSS Specificity Impact
When both selectors target the same elements, div:not(:first-of-type) has higher specificity due to the pseudo-class. This means its styles will take precedence over div~div when they conflict.
Conclusion
While both selectors often match the same elements, div:not(:first-of-type) has higher CSS specificity and doesn't require sibling relationships. Choose based on your specific styling needs and selector performance requirements.
187 Views
