CSS selectors and Pseudo-elements
Published: 2022-12-24 14:00:19

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:

(_tag__or__class_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.