DEV Community

Md Farid Hossain
Md Farid Hossain

Posted on

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;
}
Enter fullscreen mode Exit fullscreen mode

#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%;

}
Enter fullscreen mode Exit fullscreen mode

*** → 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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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%;
}
Enter fullscreen mode Exit fullscreen mode

: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;
}
Enter fullscreen mode Exit fullscreen mode
ul li:last-child {
  font-size: 16px;
  text-decoration: none;
}
Enter fullscreen mode Exit fullscreen mode

: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;
}
Enter fullscreen mode Exit fullscreen mode

: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%;
}
Enter fullscreen mode Exit fullscreen mode

: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;
}
Enter fullscreen mode Exit fullscreen mode

: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;
}
Enter fullscreen mode Exit fullscreen mode

: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;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)