Advanced CSS Selector
- CSS Selectors are used for selecting the HTML elements to apply styles.
- CSS Advance selectors are that do something more complex than selecting a tag.
Different CSS Advanced CSS Selectors are:
i) Adjacent Sibling Selector
ii) Attribute Selector
iii) nth-of-type Selector
iv) Direct Child Selector
i) Adjacent Sibling Selector: The adjacent sibling selector is used to select an element that is directly after another specific element.
div + p {
color: red;
}
ii) Attribute Selector: The attribute selector is used to select elements with the specified attribute, whose value can be exactly the specified value
a[target] {
color: blueviolet;
}
iii) nth-of-type Selector: The nth-of-type selector is used to select an element from its position and types.
li:nth-of-type(odd) {
color: red;
}
iv) Direct Child Selector: This CSS selector matches only those elements matched by the second selector that are the direct children of elements matched by the first.
ul > li{
margin-bottom: 2rem;
}
Using Advanced CSS Selectors
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> nth child selector</title>
<style>
li:nth-of-type(even) {
border: 2px solid orange;
}
</style>
</head>
<body>
<ul>
<ul>
<ul> Basic: </ul>
<li> HTML </li>
<li> CSS </li>
<li> JavaScript </li>
<ul> Library/Frameworks </ul>
<li> ReactJS </li>
<li> Angular </li>
<li> NextJS </li>
<li> VueJS </li>
</ul>
</ul>
</body>
</html>
Output:
