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.
Top comments (0)