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


<!DOCTYPE html>
<html lang="en">
    <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>
        li:nth-of-type(even) {
            border: 2px solid orange;
            <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>



Advanced CSS Selectors PDF

Download Now

Post a Comment

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

Top Post Ad

Below Post Ad

Ads Section