What is CSS and CSS Selectors?

CSS stands for Cascading Style Sheets and we used to style HTML elements. CSS selectors are used to find (or select) the HTML elements you want to style.

Basic Selectors

Universal Selector ( * )

Selects all elements

*{
    margin: 0;
}

Type Selector (Element Selector) ( H1 )

Selects HTML elements based on the element's name. For example, if you want to select all H1 tags and colour them red.

h1 {
  color: red;
}

Class & Id Selectors (.class_name) or (#id_name)

Selects HTML elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the class name. For example, if you want to select all elements with class bg-red and make them red.

Similar to class we can select an element by giving a specific id(#). The difference is that we can use id only once.

/* Class Selector */
.bg-red {
  background-color: red;
}
/* ID Selector */
#bg-yellow{
  background-color: yellow;
}

Attribute Selectors (element[attribute])

Selects HTML elements with a specific attribute or attribute value ([]). For example, if you want to select all <a> elements with a target attribute.

a[target] {
  background-color: yellow;
}

Grouping Selector (h1,h2,p)

Selects all the HTML elements with the same style definitions. To group selectors, separate each selector with a comma (,). For example, if you want to select all <h1>, <h2>, and <p> and give them same styling.

h1, h2, p {
  text-align: center;
  color: red;
}

Combination Selectors

Descendent Selector

The " " (space) combinator selects nodes that are descendants of the first element.

.box h1{
    display: flex;
}

Child combinator (>)

The ">" (child) combinator selects nodes that are below or direct children of the parent of the first element. In the below example the box class is parent and h1 is its child.

.box > h1{
    color: red;
}

Adjacent sibling combinator (+)

Selects elements that are immediately after another element and share the same parent. For example, div + p selects the first <p> element that is placed immediately after a <div> element.

.box + p {
    text-align: center;
}

General Sibling Selector (~)

Selects elements that are next siblings of another element and share the same parent. For example, h1 ~ p selects all <p> elements that are next siblings of a <h1> element.

h1 ~ p {
  font-style: italic;
}

Pseudo Selectors

Pseudo-classes (:hover)

select elements based on their dynamic state, such as hovering, focusing, visiting, etc. In the below example when the user hovers on the link it turns red.

a:hover{
    color: red;
}

Pseudo-elements (::before)

select a specific part of an element, such as the first letter, the first line, the generated content, etc.

<p class="before-selector">Lorem ipsum dolor sit amet.</p>

.before-selector::before {
  content: "added using ::before ";
  color: #2492FF;
}

Thanks for reading ...