Advanced CSS Selectors

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 SelectorThe 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 SelectorThe 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:




Advanced CSS Selectors PDF

Download Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad