What's a CSS Selector? How works CSS Selector?

“Selectors are used to selecting elements in an HTML or XML document, in order to attach (style) properties to them.”

The most used CSS selectors are by class and by id, nevertheless, there are many selectors which you can use easily and fairly to add styles into a set of elements.

Let’s take a look at all the different kinds of available selectors along with a brief description of each one of them.

The Selectors

div p → Descendant Selector

It selects an element inside another element.
This selects all the p elements inside of div.

div p {
  bacground-color: #fff;
  display: flex;
  text-aling: center;
}

#user.admin / ul.class → Descendant Combinator

You can combine any selector with the descendent selector.

user.admin selects all elements with id="user" that also have class="admin".

ul.list selects all ul elements that have class="list".

#user.admin, ul.list {
  border: none;
  text-align: left;
  width: 100%;

}

*** → The Universal Selector**

You can select all the elements with the universal selector.
div * selects any element inside all div elements.

ul.something * selects every element inside all ul class="something" elements.

div * {
  color: #F8386D;
  line-height: 26px;
}

div + p → Adjacent Sibling Selector

It selects an element that directly follows another element.

This selects the p elements that directly follow div tag. Elements that follow another one are called siblings.

span + .intro selects every element with class="intro" that directly follows a span.

span + .intro {
  color: rgb(182,216,218);
  background: #D37C71;
}

div ~ p → General Sibling Selector

You can select all siblings of an element that follow it. This is like the Adjacent Selector (div + p), but this one gets all of the following elements instead of one.

div ~ p {
  display: flex;
  align-items: center;
}

div > h1 → Child Selector

It selects direct children of an element.

You can select elements that are direct children of other elements.
div > h1 selects all h1 that are direct children div.

div > h1 {
  font-size: 16px;
  width: 100%;
}

:first-child / :last-child → First, last Child Pseudo-selector

You can use these selectors to select an element that is the first child / last child element inside another element.

ul li:first-child selects all first child p elements that are in a div.

ul li:last-child selects the last li elements inside of any ul.

ul li:first-child {
  padding: 5em;
  margin: 0 1px 0 -4px;
}

ul li:last-child {
  font-size: 16px;
  text-decoration: none;
}

:only-child→ Only Child Pseudo-selector

It selects any element that is the only element inside of another one.

ul li:only-child selects the only li element that is in a ul.

ul li:only-child {
  color: #1264a3;
  padding: 0 12px 0 15px;
}

:nth-child(A) → Nth Child Pseudo-selector

It selects the nth (Ex: 1st, 3rd, 12th, etc.) child element in another element.

div p:nth-child(8) selects every p element that is the 8th child of a div element.

div p:nth-child(8) {
  color: #FA6887;
  height: 26px;
  width: 100%;
}

:nth-last-child(A) → Nth Last Child Selector

It selects the children from the bottom of the parent.

ul li:nth-last-child(2) selects all second-to-last child elements.

ul li:nth-last-child(2) {
  display: flex;
  font-size: 16px;
  justify-content: center;
}

:first-of-type → First of Type Selector

It selects the first element of that type within another element.

span:first-of-type selects the first span in any element.

span:first-of-type {
  display: block;
  font-size: 18px;
  margin-top: 3rem;
}

:nth-of-type(1) → Nth of Type Selector

It selects a specific element based on its type and order in another element, either 'even' or 'odd' instances of that element.

.example:nth-of-type(odd) selects all odd instances of the class=”example”.

div:nth-of-type(2) selects the second instance of a div.

.example:nth-of-type(odd) {
  line-height: 1.5;
  padding: 10px 0;
  text-align: center;
}