Seletors example

Some selectors examples.

by Sanjay

HTML

<!-- Sibling selectors -->
<div class="main">
    <div class="first child">First div</div>
    <div class="second child">Second div</div>
    <div class="third child">Third div</div>
</div>

<!-- child selectors -->
<ul class="menu menu--main">
    <li class="menu__item">one
        <ul class="menu menu--submenu">
            <li class="menu__item">sub-one</li>
            <li class="menu__item">sub-two</li>
        </ul>
    </li>
    <li class="menu__item">two</li>
    <li class="menu__item">three</li>
    <li class="menu__item">four</li>
</ul>

CSS

/**
 * 1. It will select div.second, div.third elements.
 * 2. It will select only div.second element.
 * 3. It will select all li.menu__item elements.
 * 4. It will select only direct children of ul.menu--main.
 * 5. It will select 3rd, 6th, 9th, 12th so on .menu__items elements.
 */

* {                   /* Universal selector */
    font-size: 20px;
}

:root {               /* <html> element */
    background: #eee;
}

/* Sibling selectors */
.first ~ .child {     /*[1]*/
    color: red;
}
.first + .child {     /*[2]*/
    color: green;
}

/* Child selectors */
.menu--main .menu__item {   /*[3]*/
    color: red;
}
.menu--main > .menu__item { /*[4]*/
    color: green;
}

/* nth-child selecotrs */
.menu__item:nth-child(3n) {  /*[5]*/
    background: #ccc;
}