CSS selectors define the elements to which a set of CSS rules apply. CSS selectors gives you more control over the HTML element so that you can design your website more precisely.

These are some major kind of CSS selector -

Universal Selector

The universal selector provided by CSS helps in choosing any elements within the HTML page. It goes with a single element and uses the asterisk (i.e., "*") symbol used for denoting the selector as a universal selector. The universal selector becomes helpful when you wish to put a specific style in all the HTML elements within your web page. It can also be used for every single element that is within the element of your HTML page.

/* Selects all elements */
* {
  color: green;
}

Individual Selector/Element Selector

The element selector selects HTML elements based on the element name. We can target elements and style them individually, that is way it's called Individual Selector

p {
  text-align: center;
  color: red;
}
head{
color:#fff;
}

Class and Id Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name. The advantage of having a class is you can give same class to as many element as you want and can be targeted with a single class name in CSS.

/* All elements with class="spacious" */
.spacious {
  margin: 2em;
}

/* All <li> elements with class="spacious" */
li.spacious {
  margin: 2em;
}

/* All <li> elements with a class list that includes both "spacious" and "elegant" */
/* For example, class="elegant retro spacious" */
li.spacious.elegant {
  margin: 2em;
}

The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element.

/* The element with id="demo" */
#demo {
  border: red 2px solid;
}

And Selector (Chained Selector)

Chained selector is a CSS selector which selects the element with more than one class defined, suppose we have a li (list item) element with 2 classes then we should use and/chained selector. To use this selector we use .(dot).

li.bg-black.text-white{
background-color : #4d4d4d;
}

Combined Selector

Instead of writing 4 separate CSS selectors and 4 rules, you can combine all these styles into one rule property by separating the individual selectors with a comma. The CSS selector list (,) selects all the matching nodes.To reduce the size of style sheets, one can group selectors in comma-separated lists.

Here is how that would be done:

/* Selects all matching elements */
span,
div {
  border: red 2px solid;
}

Element Element Selector/Inside An Element/ Descendant Selector

The element element selector is used to select elements inside elements. It can be element inside an element inside an element and so on. To use this selector we need to target the element with space separated.

for example - to select and style every 'span' element inside 'p' element that is inside of 'div' elements:

div p span {
    background-color: yellow;
}

Direct child

The child combinator '>' is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.Elements matched by the second selector must be the immediate children of the elements matched by the first selector.

/* List items that are children of the "my-things" list */
ul.my-things > li {
  margin: 2em;
}

Sibling ~ or +

Adjacent Sibling An adjacent sibling combinator selector allows you to select an element that is directly after another specific element.

The adjacent sibling combinator '+' separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.

/* Paragraphs that come immediately after any image */
img + p {
  font-weight: bold;
}

General Siblings The general sibling combinator selector is very similar to the adjacent sibling combinator selector we just looked at. The difference is that that the element being selected doesn’t need to immediately succeed the first element, but can appear anywhere after it. It matches all iterations of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent element.

/* Paragraphs that are siblings of and
   subsequent to any image */
img ~ p {
  color: red;
}