Css Selectors

CSS Selectors are used to target the Html elements you want to style.

CSS Selectors Types:-

Universal Selector is used to select all the tags at the same time.

# Example of Universal Selector 
*{
    background-color: lightblue;
}

CSS Element Selector is used to target a particular tag.

Example it will change the paragraph background color

# Example of CSS element Selector 
p{
    background-color: lightblue;
}

CSS class and id Selector is used to select or target tag by their class and id name.

Example : The below-written code targets the element which has defined class=”btn”

# Example of CSS class Selector 
.btn{
    margin-left:20px;
}

Example The below-written code targets the element which has defined id=”label”

# Example of CSS id Selector 
#label{
    margin-left:20px;
}

CSS Group Selector helps us to target multiple tags at same time. Example The below-written code selects “p” and “span” tag

# Example of CSS id Selector 
p,span{
    color: yellow;
}

CSS Combinator is like the relationship between the selectors.

The descendant selector matches all elements that are descendants of a specified element.

Example The following example selects all “p” elements inside “div” elements:

div p{
    background-color: yellow;
}

The child selector only selects the child elements of targeted tag.

# Example of Child Selector
div > p {
  background-color: yellow;
}

The adjacent sibling selector is used to select an element that is directly after another specific element.

The following example selects the first "p" element that are placed immediately after "div" elements:

# Example of Sibling Selector
div + p {
  background-color: yellow;
}

The general sibling selector selects all elements that are next siblings of a specified element. It will select all “p” tags after “/div” closing tag

# Example of Sibling Selector
div ~ p {
  background-color: yellow;
}

CSS Selectors Guide