CSS selectors and Pseudo-elements

Hi friends let's learn about the selectors and pseudo-elements today.

universal selectors: it is type of selectors which is used to select all the elements of a HTML page . It is basically used to override the default CSS style of the browser and the basic syntax is as follows:
*{
margin: 0;
}

individual selectors: it is a type of selectors in which an element is targeted by using their tag name. The syntax of the individual selectors is as follows:
p{
margin:10px;
}

as seen in the above example all the p tag elements are given a margin of 10px.

class and Id selectors:

class: it is a type of selectors in which an element is targeted by the class of the html element. The syntax of the class selectors is as follows:

.class-name{
margin:10px;
}

as seen in the above example all the elements with class of .class-name are given a margin of 10px.

Id: it is a type of selectors in which an element is targeted by the Id of the html element . The syntax of the Id selectors is as follows:

#id-name{
color:#ffffff;
}

as seen in the above example all the elements with #id-name is has a text-color of #ffffff

the difference between class and id at the first glance is obvious that is via . or # and class can be used to multiple elements and id for one element only. It doesn't mean browsers cannot display multiple elements with same id but it is not a good practice.

& selector (chained):It is a type of selector in which an element is targeted when all the conditions of targeting is met. The syntax of the & selector is shown as the following:

(tagorclass_or_id)(class_or_tag)(class_or_tag)and so on

example:li.bg-black.text-white#blah-1{
background-color: #000;
color: #ef9323;
}

as seen in the above example an element with list tag which has all the classes and the tags with no spaces in-between is given the properties as specified above

combined selector: in this type of selector two or more, same or different types of selectors i.e. the above mentioned and following below are used to target an element or a group of elements. The below example shows how combined selector works.

li.bg-black.text-white#blah-1, .class-name, p{
padding: 19px;
}

as seen in the above example the three different types of selectors separated by the a comma is selected and is given a padding of 19px.

inside an element:this is a type of selector in which a element which is inside an another element is selected. The below example show the inside an element selector.

div ul li{
border:1px;
}

as seen in the above example all the elements in which li which is inside ul which is inside div is selected and border property is applied.

direct child: this is a type of selector in which a element which is a direct child of an other element is selected the direct child can be understood by the following example :

div >ul >li{
color: black;
}

as seen in the above example all the elements in which a div which has the direct child ul which has a direct child li is selected and is given a text-color of black.

*sibling ~ or + *: this is a type of selectors which is used to target a element which is its sibling. this can be understood by the following example.

.sibling + p{
background-color: pink;
}
as seen in the above example a adjacent sibling element which has class .sibling is selected . if instead of p ~ is used all sibling element after class .sibling is selected.

pseudo-elements:A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element. The two most majorly used pseudo-elements are:

• ::before and ::after : this is used to add content but mostly used for styling an element used along with a selector the diffrence is that before adds content before the selected element after adds the content after the selected. the example is shown in the below figure. .imp-label:hover::before{ content: ''; display: block; width: 20px; height: 20px; border-radius: 10px; background-color: orange; }

as seen in the above figure when hover your pointer over the element which has a class of imp-label a orange circle is shown above that element which occupies entire block. when instead before after is used content is placed after the element with class.