# CSS Selectors & Pseudo Selectors

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

```css
*{
    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.

```css
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.

```css
/* 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.

```css
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.

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

## Combination Selectors

### Descendent Selector

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

```css
.box h1{
    display: flex;
}
```

### **Child combinator (&gt;)**

The "&gt;" (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.

```css
.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.

```css
.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.

```css
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.

```css
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.

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

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

**Thanks for reading ...**