dev aricles

css selectors

css selectors

mayur tiwari's photo
mayur tiwari
·

2 min read

Table of contents

No heading

No headings in the article.

Consider the following html code to understand examples given in the article:

<h2>
    mayur's marks
</h2>

<ul>
    <p> <b>subjects and marks</b> </p>
    <li class="sub fav">ENGLISH-86</li>
    <li class="sub">HINDI-89</li>
    <li id="imp">MATHS-99.5</li>
</ul>

<div>

    <p>REMARKS-mayur is an awesome student</p>
</div>

<div>
    <h4 class="sub fav">sports he plays-</h4>
    <ol>
        <li class="sibling">basketball</li>

        <li>shooting</li>
        <li>badminton</li>
    </ol><br>
    <span >mayur's tel-9898989898</span>
</div>

</html>

##UNIVERSAL SELECTOR-it helps us to target all the elements of our html file. E.g.-if we want to change the background color of whole page,then we will use 

* {
            background-color: cornflowerblue;
        }

##INDIVIDUAL SELECTOR-it is used when we want to select a specific element. E.g.-if we want that only the color of our heading should change and become white,then-

h1{
            color: antiquewhite;
        }

##CLASS AND ID SELECTOR-if we have attached class and id attributes to some elements then we can target those elements by their id(using #id name ) and class(using .class name). E.g.-if i want to give background green to hindi,english and blue to maths,

.sub{
            background-color: green;
        }
        #imp{
            background-color: blue;
        }

##AND SELECTOR-what if we want that for styling css should select only those elements which should have (for example CLASS A CLASS B CLASS C) all the three classes.in this particular case AND selector is used. E.g.-lets convert the color of english to grey

 li.sub.fav{
            background-color: gray;
        }

##COMBINED SELECTOR-this is used when we want to target all the elements and classes which we have mentioned.basically we can say its an OR selector. E.g.-for coloring both span and sports list,

span,ol,ol>li{
            background-color: chartreuse;
        }

##INSIDE AN ELEMENT-we use this when we want to select a specific element or group of elements inside an element.

div ol li{
            color: crimson;

##DIRECT CHILD-this is somewhat similar to inside n element.it is used when we want to select an element's child.(can be chained also)

 div>p{color: whitesmoke;}

##SIBLING-if we want to select the next upcoming element then we use sibling. E.g.-if we want to make shooting black

 .sibling + li{
            background-color: black;

        }

##BEFORE AND AFTER PSEUDO SELECTORS-if we want to select an area and style it just before and after an element we use this selector.use of content=" and display=block is necessary for this element. E.g.- for the following html code:


<body>
    <form action="">
        <label class="label1" for="">name</label>
        <input type="text"><br>
        <label for="">email</label>
        <input type="email" name="" id="">
    </form>
</body>

If we want a circle before the label element,we can add like this:

 .label1::before{
            display: block;
            content: '';
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background-color: aqua;

        }

same thing can be done if we want a circle after label element by replacing before with after in the code

iwritecodeineuron