Selectors in CSS

Selector:- CSS Selectors are used to targeting the HTML element you want to be styled.

The following are types of selectors.

1) Universal selector:- Its name gives us clarity about this selector, it will select the whole HTML document.

Syntax:-

                    *{Properties: value ;
                      }

Example-

2) Individual Selector:- To select or target any HTML element then Individual Selector is used.

Syntax:-

              p {Properties: value;
                }

Example-

3)Class&id selector:-To select particular Html element then Class & id selector comes in picture.

Syntax:-

              .class name{ Properties: value;
                         }
               #Id name{Properties: value;
                       }

When some element identifies uniquely then use id.
The ID should be one in the HTML document.
. (dot) is used to target the class.
#(asterisk ) is used to target ID.
In HTML document more than one class are allowed.

Example-

class & id.png

4)And selector(chained selector):- When there are two or more conditions, the And selector should be selected.

syntax:-

               li.bg-black.text-white{Properties: value;
                                     }

-Above syntax there are two conditions 1) is bg-black 2) is text-white & li tag is a parent tag. -in this selector .(dot) will work as and selector.

Example-

and selector.png

Combined Selector:- When multiple elements get selected then a combined selector is used. -Just hit the comma between two elements.

Syntax:-

                span,li{Properties: value;
                        }

Example-

Inside an element Selector:- When there is an element present inside another element and that element should get selected then inside an element selector is used.

Syntax:-

              div ul li{Properties: value;
                        }

-Space is mandatory between tags.

Example-

Direct child Selector:- If we want to select a direct child element from an HTML document then a Direct child Selector is used. -Just hit >(graeter than sign) between parent & child element.

Syntax:-

                 div>li{Properties: value;
                         }

Example-

direct child.png

Sibling selector:- Make a class name "sibling" and it will select the element which is next to the sibling class.

Syntax:-

                 .sibling+p{Properties: value;
                             }

Example-

For more details:- codepen.io/pashupati1999/pen/PoaOYdw

Selectors in CSS

Selection of selectors

Table of contents

No headings in the article.