CSS Selectors

Hi Coders, in this post you will learn what CSS selectors are and how they work in HTML code. CSS selectors are a part of our CSS rules which contain style declaration block. This declaration block can contain many style properties, which are separated by semicolons. The declaration will target the HTML element which you want to select using the selector. Let's look at all the different kinds of selectors.

by TrickyUI

HTML

<h1>CSS Selectors</h1>

    <!-- Universal Selector -->

    <p>Lorem Ipsum is simply dummy</p>
    <div>Lorem Ipsum is simply dummy</div>

    <!-- Universal Selector -->
    <br>
    <div class="divider"></div>
    <br>
    <!-- Class Selector -->

    <div class="box"></div>
    <div class="box"></div>
    <div class="box bdr"></div>

    <!-- Class Selector -->
    <br>
    <div class="divider"></div>
    <br>
    <!-- ID Selector -->
    <div id="box"></div>
    <div id="box" class="bdr"></div>
    <!-- ID Selector -->
    <br>
    <div class="divider"></div>
    <br>
    <!-- Element Type Selector(Type Selector)  -->
    <div>Lorem Ipsum is simply dummy</div>
    <p>Lorem Ipsum is simply dummy</p>
    <!-- Element Type Selector(Type Selector)  -->
    <br>
    <div class="divider"></div>
    <br>
    <!-- Descendant Selector -->
    <div>
        <section>
            <p>Lorem Ipsum is simply dummy</p>
            <p>Lorem Ipsum is simply dummy</p>
        </section>
    </div>
    <p>Lorem Ipsum is simply dummy</p>

    <!-- Descendant Selector -->
    <br>
    <div class="divider"></div>
    <br>
    <!-- Child Selector -->
    <div>
        <p>Lorem Ipsum is simply dummy</p>
        <p>Lorem Ipsum is simply dummy</p>
        <div>
            <p>Lorem Ipsum is simply dummy</p>
            <p>Lorem Ipsum is simply dummy</p>
        </div>
    </div>
    <!-- Child Selector -->
    <br>
    <div class="divider"></div>
    <br>
    <!-- General Sibling Selector -->
    <section class="g-siblings">
        <h2>Title</h2>
        <p>Lorem Ipsum is simply dummy</p>
        <p>Lorem Ipsum is simply dummy</p>
        <div>
            <p>Lorem Ipsum is simply dummy</p>
        </div>
    </section>

CSS

* {
    color: #000;
    font-size: 16px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    padding: 20px;
}

hr {
    display: block;
}

.divider {
    border: 1px dashed #000;
    clear: both;
}

.box {
    height: 100px;
    width: 100px;
    background: red;
    float: left;
    margin: 10px;
}

.bdr {
    border: 5px solid #000;
}

#box {
    height: 100px;
    width: 100px;
    background: green;
    float: left;
    margin: 10px;
}

div p {
    font-size: 16px;
    color: #ff0000;
}

div>p {
    color: #ffffff;
    background: #ff0000;
}

.g-siblings h2~p {
    color: #ffffff;
    background: black;
}