# Introduction to CSS selectors

### CSS selectors:

CSS selectors are used to select the HTML elements to which we can stylize and give different properties.

There are different types of CSS selectors and they are as follows -

### Universal selector:

The Universal selector helps us to select all the elements within that page.

**Syntax:**

```css
* { 
   style properties 
}
```

**Example:**

```xml
<!-- This is HTML code -->

<p>This is line one.</p>
<div>This is line two.</div>
<span>This is line three.</span>
```

```css
* {
   color: #E21717;
}
```

**Result:**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676061654871/8afda891-0a3a-4c8b-9c3e-25eaeb5c5e26.jpeg align="center")

### Individual selector:

The Individual selector selects the element using the element name.

**Example:**

```xml
<!-- This is HTML code -->

<p>This is line one.</p>
<div>This is line two.</div>
<span>This is line three.</span>
```

```css
p {
   color: #E07C24;
}
```

**Result:**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676061676534/e9e90a46-29ff-4c6d-9eb4-f76079b8c623.jpeg align="center")

### Class selector:

The Class selector selects the element based on the content defined inside the class attribute.

**Syntax:**

```css
.class-name {
   style properties
}
```

**Example:**

```xml
<!-- This is HTML code -->

<p>This is line one.</p>
<div class="two">This is line two.</div>
<span>This is line three.</span>
```

```css
.two {
   color: #1FAA59;
}
```

**Result:**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676061698210/8d4b2951-70ac-41dc-a7ce-73a25a0d38f5.jpeg align="center")

### ID selector:

The ID selector selects the element based on the content defined inside the id attribute which is unique and should not be defined inside any other element.

**Syntax:**

```css
#id-name {
   style properties 
}
```

**Example:**

```xml
<!-- This is HTML code -->

<p>This is line one.</p>
<div>This is line two.</div>
<span id="three">This is line three.</span>
```

```css
#three {
   color: #F7CD2E;
}
```

**Result:**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676061733076/cae6aaec-c910-44da-b632-25b2b874ff4f.jpeg align="center")

### And selector:

The And selector allows the selection of specified element with the specified class.

**Syntax:**

```css
.class-one.class-two {
   style properties
}
```

**Example:**

```xml
<!-- This is HTML code -->

<p class="car automobile">BMW</p>
<p class="car">Mercedes</p>
<p class="car">Audi</p>
```

```css
.car.automobile {
   color: #2827CC;
}
```

**Result:**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676061771557/7664138d-ba29-497d-82b4-5366f11b63fb.jpeg align="center")

### Combined selector:

The Combined selector helps us to select multiple elements/items by separating them with commas.

**Syntax:**

```css
p, div, span {
   style properties
}
```

**Example:**

```xml
<!-- This is HTML code -->

<p>This is line one.</p>
<div>This is line two.</div>
<span>This is line three.</span>
```

```css
p, div, span {
   color: #FF6263;
}
```

**Result:**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676061796448/1e55b77b-c2ab-4dea-b0c5-72922e898c2d.jpeg align="center")

### Inside selector:

The Inside selector selects all the elements that are descendants of a certain element.

**Syntax:**

```css
div p {
   style properties
}
```

**Example:**

```xml
<!-- This is HTML code -->

<p>Different car brands:</p>

<div>
<p>BMW</p>
<p>Mercedes</p>
<p>Audi</p>
</div>
```

```css
div p {
   color: #FF6666;
}
```

**Result:**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676061819945/5a638ff4-9dce-4f31-b079-40e565ee3ec1.jpeg align="center")

### Direct child selector:

The Direct child selector selects the element that is a direct child to their parent element by using &gt; in between them.

**Syntax:**

```css
div > p {
   style properties
}
```

**Example:**

```xml
<!-- This is HTML code -->

<div>
<span>BMW</span>
<p>Mercedes</p>
</div>
```

```css
div > p {
   color: #5737D6;
}
```

**Result:**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676061875333/a0eb2344-56fc-4bd4-b3b6-f8c772271db6.jpeg align="center")

### Sibling selector:

**General Sibling selector:** The General Sibling selector is used to select all the given elements that are upcoming siblings of a certain element.

**Syntax:**

```css
div ~ p  {
   style properties
}
```

**Example:**

```xml
<!-- This is HTML code -->

<p>This is line one.</p>
<div>This is line two.</div>
<span>This is line three.</span>
<p>This is line four.</p>
<p>This is line five.</p>
```

```css
div ~ p {
   color: #b2de27;
}
```

**Result:**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676061911649/945a4cea-5915-4bb5-8f60-9721ab2d1c35.jpeg align="center")

**Adjacent Sibling selector:** The Adjacent Sibling selector selects the sibling element that follows immediately after a certain element.

**Syntax:**

```css
div + p {
   style properties
}
```

**Example:**

```xml
<!-- This is HTML code -->

<p>This is line one.</p>
<div>This is line two.</div>
<p>This is line three.</p>
<p>This is line four.</p>
```

```css
div + p {
   color: #50DBB4;
}
```

**Result:**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676061936940/23d6bf8f-9cef-4ea5-8e9c-9bd0140a961c.jpeg align="center")

### Pseudo selector:

**Pseudo-element:** A Pseudo-element is used to stylize a particular part of the element by using a variety of keywords that have been made available to us. We always need to use the "content property" to make the Pseudo-element work.

**Syntax:**

```css
element-name::before {
   content: ;
   style properties
}
```

**::before Pseudo-element:** The ::before Pseudo-element is used to add content before the content which is inside the specified element.

**Example:**

```xml
<!-- This is HTML code -->

<p>This is two.</p>
```

```css
p::before {
   content: "This is one.";
   color: #758283;
}
```

**Result:**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676061959624/ff3e8f8c-d1bc-4585-86d0-52338a4d0de0.jpeg align="center")

**::after Pseudo-element:** The ::after Pseudo-element is used to add content after the content which is inside the specified element.

**Example:**

```xml
<!-- This is HTML code -->

<p>This is one.</p>
```

```css
p::after {
   content: "This is two.";
   color: #758283;
}
```

**Result:**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676061980073/a545f8a4-d4f6-4ace-b1e3-7752e35f2473.jpeg align="center")

**Pseudo-class:** A Pseudo-class is used to specify a special state of an element by using a variety of keywords that have been made available to us.

**Syntax:**

```css
element-name:hover {
   style properties
}
```

**:hover Pseudo-class:** The :hover Pseudo-class is used to apply the hover effect to an element so that every time you place your mouse cursor over it, it will display its special state according to the styles applied to it.

**Example:**

```xml
<!-- This is HTML code -->

<span>This is line one.</span>
```

```css
span:hover {
   background-color: #000000;
   color: #ffffff;
}
```

**Result:**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1676062021356/f56decbd-5608-4f2d-b5ca-756f54ca8547.jpeg align="center")

Thank you!