Get Comfortable With CSS Selectors
Tags: css, html, webdev, beginners
Published: 2021-12-07 12:05:39

 
HTML and CSS to a front-end developer are like a knife and a fork to a chef. The more you get used to using  HTML and CSS skills together, the better a front-end developer you will become.

And the best way to learn how to use these skills together is to understand the different **CSS Selectors.** 

This blog will look at the different types of CSS selectors and how you can use them to build efficient CSS code. 

let's get started 💃

## **What are CSS Selectors?**

**CSS selectors** is the opening part of a CSS ruleset,  it determines how you apply styles to HTML elements on a web page.  

There are many different types of CSS selectors, each with its own unique syntax. These tell the browser which elements to apply CSS property values to.

 The element or elements targeted by a CSS selector are  the **“subject of the selector.”**

 You can select a subject based on its element type, class, ID name, or pseudo-state. 


**CSS selectors** are case-sensitive, they must match element names and attribute values exactly.

A `.coding` class selector is not the same as `.CODING`

It is advisable to use small letters to avoid making mistakes.

**The syntax for CSS Selector is:**

```
selector {
CSS-property: value;
}
```

### **There are two types of CSS selectors:**

- Basic CSS selectors.
- Advanced CSS selectors.



## **BASIC CSS SELECTORS**

**Basic CSS selectors** are the most common type of CSS selectors. They style specific elements on a website, in the basic selectors we have selectors such as:

- CSS class Selectors
- CSS ID Selectors
- Element Type Selectors
- CSS Universal Selectors


### **The CSS Class Selector**

The **CSS class selector** identifies an element based on its **class attribute**. You can use CSS class selectors to style many HTML elements.

You can use the **CSS class selector** on any HTML element.

To select elements with a specific class, write a **period (.) character**, followed by the **class name**.

**The syntax for CSS Class Selector is:**

```
.class-name {
property: value;
}
```

**Examples of CSS Class selector:**


In the example below ⬇️ the `<p>` element has a `class="text"` 


```
<p class="text">When will manchester united win a trophy again?</p>

```

To select the `<p>` element using the CSS class selector, we:

```
.text {
  text-align: center;
  color: orange;
  font-size: 20px;
}
```

All Html element with `class="text"` will align to the center, have orange text color and a font-size of 20px.

 **Remember you can use the CSS class selector to style many HTML elements right?**

 let us see how it works  🙂


I want both the `<p>` and the `<button>` element to have the same exact CSS style, so I give both the same `class="code"`.

```
<h1>Football<h1>
<p class="code">When will manchester united win a trophy again?</p>
<h2>Rejoice</h2>
<button class="code">Submit</button>

```

I hope you noticed that both the `<p>` and the `<button>` element have the same `class="code"` in the above  ⬆ example? 🤔

```
.code {
  text-align: center;
  color: green;
  font-size: 18px;
}
```
The `<p>` and `<button>` in the example above  ⬆ will have the same text color, font size, and will align to the center of the web page.


 **You can also specify that a class should affect only a specific HTML element** 

In the example below ⬇️ both the `<p>` and the `<button>` element have the same `class="code"`.

```
<h1>Football<h1>
<p class="code">When will manchester united win a trophy again?</p>
<h2>Rejoice</h2>
<button class="code">Submit</button>

```

**I want to style only the `<p>` element, How do we do that?**

Remember both the `<p>` and `<button>` have the same class name.

```
p.code {
  text-transform: capitalize;
  color: orange;
  font-size: 20px;
}
```

In the example above  ⬆ only paragraph `<p>` elements with `class="code"` will be orange, and have a font-size of 20px. It won't affect the `<button>` element.



### **The CSS Id Selector**

The **CSS Id selector** identifies an element based on its ID attribute.  ID selector is unique and you should only use them once per page to select one unique element.  

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

**The syntax for CSS id Selector is:**

```
#id-name {
property: value;
}
```

**Example of CSS Id Selector**

In the example below  ⬇ the `<p>` element has a `id="coding"`

```
<p id="coding">football is no longer fun</p>

```

To select the `<p>` element using the CSS Id selector, we:

```
#coding {
  text-align: center;
  color: red;
}
```

In the example above ⬆, the CSS rule will apply to the HTML element with id="coding".

Remember that the Id Class selector is a unique identifier. It means that in an HTML document, you can't have more than one element with the same id; you can only select one element. 

> 
Use  Id selectors rarely and only on elements that need to always appear the same. 

 

### **What Is the Difference Between CSS Class selectors and Id selector?**


You can repeat the same **CSS class selector** value across many Html elements but you can only use an ID once.



### **Element Type Selectors**

**Element Type Selectors** are the most common basic CSS selectors. They select HTML elements based on the element name.

**The syntax for Element Type Selector is:**

```
element {
property: value;
}
```

**Example of Element Type Selectors:**

```
p {
text-align: center;
font-size: 20px;
color: red;
}
```

In the above  ⬆ example, all paragraph `<p>` elements will align to the center, have a font size of 20px, and text color of red.



### **The CSS Universal Selector**

The universal selector (*) selects all HTML elements on the page. 

Every HTML element, from the `<header>` to the `<footer>`,' follows the universal selector's style.

 The asterisk (*)  character represents Universal selectors.  


**The syntax for Universal Selector is:**

```
* {
CSS-Property: value;
}
```

**Example of CSS Universal Selector**
 
```
* {
text-align: center;
text-transform: Uppercase;
}
```

Every single element on the web page will align to the center of the page and have uppercase letters.



### **The CSS Grouping Selector**

**CSS grouping selectors** select all the HTML elements with the same style definitions.

**CSS grouping selectors** save time and help you to write clearer codes.

You may want to apply the same exact styles to several Html components at times.  For example, all your `<h1>`,  `<h2>`, and `<h3>` elements should have a red background,  a font-weight of 700 and a font-size of 28px. 

One approach is to style each HTML element in your CSS stylesheet,  `<h1>`, `<h2>` and  `<h3>` as different selectors  . There's nothing wrong with this, but if you do it, you'll get a CSS stylesheet full of repeated declarations. 

A better solution is to use one CSS ruleset with many declarations separated by a comma(,).

 Take a close look at the CSS codes below  ⬇️; you'll see that the `<h1>`, `<h2>`, and `<h3>` elements all have the same CSS style. 

```
h1 {
background-color: red;
color: white;
font-weight: 700;
font-size: 28px;
text-align: center;  
}

h2 {
background-color: red;
color: white;
font-weight: 700;
font-size: 28px;
text-align: center;
}

h3 {
background-color: red;
color: white;
font-weight: 700;
font-size: 28px;
text-align: center;
}
```

In the example above  ⬆️  we gave `<h1>`, `<h2>`, `<h3>` the same exact CSS style, will it work that way? Yes, it will work but it will be better to group the selectors to avoid repetition and make our codes easier to read.

**To group selectors, we separate each selector with a comma(,).**


Let's group the above CSS codes with a Comma (,)  😄 


```
h1, h2, h3 {
background-color: red;
color: white;
font-weight: 700;
font-size: 28px;
text-align: center;
}
```


-  It's possible for us to use comma(,) to group them together because `<h1>`, `<h2>`, `<h3>` have the same exact CSS styles.

-  The selectors don't have to match before you group them, as long as you give them the same exact CSS styling. For example, we can group ` <h1>` with `<button>` with `<p>` as long as we give them the same styles. 

- We can also group a CSS Class selector with ID selectors if we want them to have the same exact CSS styling.

```
<h1 id="tech">Coding is life</h1>
<p class="future">Coding is fun</p>
```

To group the above Example:

```
#tech,
.future {
font-size: 20px;
color: red;
text-transform: capitalize;
}
```

Remember we use the Comma(,) cause we want them to have the same exact CSS style.

 
**What do we do when `<h1>`,  `<h2>`, and  `<h3>` have a few comparable CSS stylings but different font sizes and colors?**


```
/*group the selectors cause they have the same styles*/
h1,
h2,
h3 {
text-align: center;
text-transform: uppercase;
}


/*apply individual styles to all 3 selectors*/
h1 {
font-size: 30px;
color: red;
}

h2 {
font-size: 25px;
color: orangered;
}


h3 {
font-size: 20px;
color: green;
}
```
 `h1`, `h2`, and `h3` all have  `text-align: center;` `text-transform: uppercase;`  so I grouped them.

`font size` and `color` are different for  `h1`, `h2`, `h3`, so I applied the `font size` and `color` to all three selectors.  


I hope you understand basic CSS selectors?  😄. 

Let's move on to **Advanced CSS Selectors**.

<iframe src="https://giphy.com/embed/26DOpJRJMhRPGqUsE" width="240" height="300" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/ussoccer-dance-happy-26DOpJRJMhRPGqUsE"></a></p>









## **ADVANCED CSS SELECTORS**

Advanced CSS selectors enable us to do more than what Basic CSS allows us to do.

In advanced CSS selectors we have the following:

- Combination Selectors.
- Pseudo-class-selectors.
- CSS Attribute Selectors.


### **COMBINATION SELECTORS**

**Combination Selectors** select elements based on a specific relationship between them.

There are 4 types of combination selectors:

- Descendant selectors.
- Child selectors.
- Adjacent sibling selectors.
- General sibling selectors.

 
CSS selectors rely on the HTML Family Tree.  It's vital to grasp the relationships between HTML elements before I go further.

The HTML family tree is also referred to as the HTML document tree.

The family tree consists of descendants, parents, children, and sibling elements.


- **A parent** element contains other elements.

-  **The child element** is an element that is immediately contained by another element.

- **A sibling** is an element that shares the same parent with another element.



```
1 <div>
2 <img src="" alt="">

3 <article>
4 <h1>coding is life</h1>
5 <p>Code everyday</p>
6 </article>

7 <aside>
8 <h2>Make out time to take care of yourself as a developer</h2>
9 <p>It's okay to read something else other than a coding book</p>
10 </aside>

</div>
```

In the example above:

- The `<div>` is **the parent.**

- The `<img>` in line 2, `<article>` in line 3 and the `<aside>` element in line 7 are the **children** of the `<div>`. 

- The `<article>` element in line 3 is **the parent** of the `<h1>` in line 4 and the `<p>` element in line 5.

- The `<h1>` in line 4 and the `<p>` element in line 5 are **siblings** with the same parent `<article>` element.

- The `<h1>` in line 4 and the `<p>` element in line 5 are the children of the `<article>` and **the grandchildren** of the `<div>` element

- The `<aside>` element in line 7 is **the parent** of the `<h2>` in line 8 and the `<p>` element in line 9.


 Let's take a look at each of these selectors one by one, using examples to help us grasp how they function 😄.

### **Descendant Combinator Selectors**

**Descendant Combinator selectors** match all elements that are descendants of a specified element. 

**Descendant Combinator selectors** select the children, grand-children e.tc when used.

To select **Descendants** use multiple selectors separated by spaces.

**The syntax for Descendant Combinator Selector is:**

```
selector1  selector2 {
property: value;
}
```

**Example 0f Descendant Combinator selector:**

```
1 <h2>Coding is Fun</h2>

2 <article>

3 <h2>Cess - The Frontend Web developer</h2>
4 <p>I will be working as a full-time frontend web developer by this time next year</p>
5 <div>
6 <h2>Coding is life</h2>
7 <p>I prefer using CSS flexbox to Grid</p>
8 </div>

9 </article>
```

**In the above example:**

- `<h2>` element in *line 1* is outside the `<article>` element

- `<h2>` in line 3, `<p>` in line 4 and `<div>` elements in *line 5* are the children of the `<article>` element

- `<h2>` in line 6 and `<p>` element in line 7 are the children of the `<div>` element in line 5 which makes them the grandchildren
   of the `<article>` element

Remember Descendant selector selects both the children and the grand-children when used.


let's style all the  `<h2>` inside the `article` element using the Descendant selector:

```
article h2 {
  text-align: center;
  color: orange;
  font-size: 20px;
}
```

The above  ⬆️  example selects all `<h2>`' elements within the `<article>`' element because they are within the `<h2>`' element.

### **Child Combinator Selectors**

 **Child selectors** match an element that is an immediate child of another element. 

The **Child Combinator Selectors** selects only the child elements. 

Child combinator selector does not select the grandchildren elements like the **Descendant selector**.
 
The greater-than sign (>) character is often used to represent a child selector.

You place the greater than sign (>)  between the parent and child element.


**The syntax for Child Combinator Selector is:**

```
Parent-selector > Child-selector {
property: value;
}
```

**Example 0f Child Combinator selector:**

```
1 <h2>Coding is Fun</h2>

2  <article>

3 <h2>Cess - The Frontend Web developer</h2>
4 <p>I will be working as a full-time frontend web developer by this time next year</p>

5 <div>
6 <h2>Coding is life</h2>
7 <p>I prefer using CSS flexbox to Grid</p>
8  </div>
9  </article>
```
**Styling the above  ⬆️  Html code:**

```
article > h2 {
  text-align: center;
  color: orange;
  font-size: 20px;
}
```


- The above ⬆️ example will target only the `<h2>` element in line 3 cause it falls within the `<article>` element. 

-   It will ignore any `<h2>` that is outside of the `<article>` element or contained inside another element. 


### **What is the difference between Descendant Combinator Selector and Child Combinator Selector?**

The child combinator selector ( > ) targets an element that is a child of its parent.  It does not target descendants beyond the children. 

The descendant combinator selects all the children or grandchildren of a given element. 



### **Adjacent sibling selectors**

**The Adjacent sibling** selects an element that is after another specific element.

Sibling elements must have the same parents. They must be immediately following each other.

The plus (+) character represents adjacent sibling selectors. 

**The syntax for Adjacent sibling selector is:**

```
first-sibling-selector + second-sibling-selector {
property: value;
}
```
The way you read this combinator is from right to left.

- The first sibling element comes first.

- The second sibling element comes second and is the targeted element. the targeted element is the element you intend styling 

**Example 0f Adjacent sibling selector:**

```
1 <h2>Coding is Fun</h2>

2  <article>

3 <h2>Cess - The Frontend Web developer</h2>
4 <p>I will be working as a full-time frontend web developer by this time next year</p>

5 <div>
6 <h2>Coding is life</h2>
7  </div>
8  </article>
```

**Styling the above  ⬆️  Html code:**

```
h2 + P {
  text-align: center;
  color: orange;
  font-size: 20px;
}
```

The above  ⬆️  example will target only the `<p>` element in line 4. It is exactly after the `<h2>` element and they both share the same parent element. 

 
Remember the **Adjacent sibling** selects the second sibling when it appears right after the first sibling element and they share the same parent.


### **General sibling selectors**

**General sibling selectors** select the elements that follow and share the same parent. 

It is not necessary that the second element immediately follows the first element.

 The tilde (~) character represents general sibling selectors.  

**The syntax for General sibling selector is:**

```
first-sibling-selector ~ second-sibling-selector {
property: value;
}
```
- The first sibling element comes first.

- The second sibling element comes second and is the targeted element. The targeted element is the element you intend styling 

**Example 0f General sibling selector:**

```
1 <h2>Coding is Fun</h2>

2  <article>

3 <h2>Cess - The Frontend Web developer</h2>
4  <img src="...." alt="...">
5 <p>I will be working as a full-time frontend web developer by this time next year</p>

5 <div>
6 <h2>Coding is life</h2>
7  </div>
8  </article>
```

 **Styling the above  ⬆️  Html code:** 

```
h2 ~ p {
  text-align: center;
  color: orange;
  font-size: 20px;
}
```

The above  ⬆️  example will target only the `<p>` element in line 5. It is exactly after the `<h2>` element in line 3 and they both share the same parent element.  

 
**General sibling selector** will operate when both sibling elements have the same parent.
 
As long as the siblings have the same parent, it doesn't matter if they are born immediately after each other.


## **CSS ATTRIBUTE SELECTORS**


Attribute selectors select all elements that have a given attribute or attribute value.

An attribute is a piece of the markup language used to change how an HTML element behaves or displays.

You include attributes in an HTML element's opening tag 

**Example**

```
<a href="https://www.twitter.com/cessss_" target="_blank">Connect with me on twitter</a>
```

 In the example above `target="_blank" is an attribute of the anchor tag `<a></a>`

**The syntax for Attribute Selector is:**

```
selector[attribute] {
property: value;
}
```

**There are 7 types of Attribute selectors:**

- Present Attribute Selector
- Equals Attribute Selector
- Begins With Attribute Selector (^)
- Ends With Attribute Selector ($)
- Contains Attribute Selector (*)
- Attribute Spaced Attribute Selector (~)
- Hyphen Attribute Selector (|)


### **Present Attribute Selector**

**Present attribute selector** select elements with a specified attribute 


**The syntax for Present Attribute Selector is:**

```
selector[attribute] {
property: value;
}
```


**Example 0f Present attribute selector:**

```
<a href="#" target="_blank">Code everyday</a>
```
**Styling the above  ⬆️  Html code:** 

```
a[target] {
  color: orange;
  font-size: 20px;
}
```
The CSS styles above  ⬆️  will work on any `<a>` element with a `"target"` attribute. 

Styles will not apply to all other `a` elements that don't have a `target` attribute. 

### **Equals Attribute Selector**

 Equals attribute selectors select elements with a specified attribute and value. 

The equals (=) character represents Equals attribute selectors.


**The syntax for Equals Attribute Selector is:**

```
selector[attribute="value"] {
property: value;
}
```

**Example 0f Equals attribute selector:**

```
<a href="www.codecademy.com" target="_blank">Code everyday</a>
```
 

**Styling the above  ⬆️  Html code:** 

```
a[href="www.codecademy.com"] {
  color: orange;
  font-size: 20px;
}
```
The example above  ⬆️  will find any `<a>`' element with a `'href'` attribute set to `"www.codecademy.com"` and apply the CSS styles to it.



### **Begins With Attribute Selector** 

**Begins with selector** select elements whose attribute value begins with a specific value. 

You don't have to write down the whole word of the value you specify when using  **Begins with selector**. 
 
The circumflex accent (^) character represents Begins with selector.

**The syntax for Begins with selector is:**

```
selector[attribute^="value"] {
property: value;
}
```

**Example 0f Begins with attribute selector:**

```
<a href="https://www.codecademy.com" target="_blank">Code everyday</a>
```
 
**Styling the above  ⬆️  Html code:**  

```
a[href^="https://"] {
  color: orange;
  font-size: 20px;
}
```

The example above  ⬆️   will find any `<a>`' element with a `href` attribute that starts with `"https://"` and apply the CSS styles to it.



### **Ends With Attribute Selector**

 **Ends with selector** select elements whose attribute value ends with a specific value. 

You don't have to write down the whole word of the value you specify when using  **Ends with selector**. 

**Ends with selector** is the opposite of the **begins with selector**.  


The dollar sign ($) character represents Ends with selector

**The syntax for Ends with selector is:**

```
selector[attribute$="value"] {
property: value;
}
```

**Example 0f Ends with attribute selector:**

```
<a href="https://www.codecademy.com/docs/menu.pdf">Code documentation</a>
```

**Styling the above  ⬆️  Html code:**  

```
a[href$=".pdf"] {
  color: orange;
  font-size: 20px;
}
```
 The example above  ⬆️   will find any `<a>`' element with a `''href''` attribute that ends with `".pdf"` and apply the CSS styles to it. 



### **Attribute spaced Selector** 

 **Attribute spaced Selector** is also called white space attribute selector. 

It matches any element whose attribute value is a list of space-separated values. One of the values used will be equal to any of the values in the space-separated values. 

By space-seperated values, I mean attribute values like  `class="fun coding"` 

The tilde (~) character represents the attribute spaced selector.

**The syntax for Attribute spaced selector is:**

```
selector[attribute~="value"] {
property: value;
}
```

**Example 0f Attribute spaced selector:**

```
<a href="#" rel="tag nofollow">Code documentation</a>
```

**Styling the above  ⬆️  Html code:**  

```
a[rel~="tag"] {
  color: orange;
  font-size: 20px;
}
```
The example above  ⬆️   will find any `<a>`' element with a `''rel''` attribute with a value of `"tag"` and apply the CSS styles to it. 


### **Contains Attribute Selector**   

>  **Contains attribute selector** select elements whose attribute value contains a specified value. 

The asterisk (*) character represents Contains Attribute selector


**The syntax for Contains Attribute selector is:**

```
selector[attribute*="value"] {
property: value;
}
```

**Example 0f Contains Attribute selector:**

```
<a href="/signin.com">Code documentation</a>
```
 **Styling the above  ⬆️  Html code:** 
```
a[href*="signin"] {
  color: orange;
  font-size: 20px;
}
```

The CSS styles will work on any `<a>` element with a `"href"` attribute that contains a value of  `"signin"`.


### **Hyphen Attribute Selector**

>  Hyphen attribute-selector select elements with the specified attribute starting with the specified value. 

It selects all elements whose attribute has a hyphen-seperated list of values. 

> The value has to be a whole word, either alone, like class="top", or followed by a hyphen( - ), like class="top-text"! 

The vertical line (|) character represents Hyphen Attribute Selector

**The syntax for Hyphen Attribute Selector is:**

```
selector[attribute|="value"] {
property: value;
}
```

**Example 0f Hyphen Attribute selector:**

```
<a href="#" lang="en-US">Code documentation</a>
```
  **Styling the above  ⬆️  Html code:** 

```
a[lang|="en"] {
  color: orange;
  font-size: 20px;
}
```
 The CSS styles will work on any `<a>` element with a `"lang"` attribute that contains a value of  `"en"`. 

> It matches the elements with the `lang` attribute that has the values `en` `en-US` `en-GB` and so on but not `US-en`, `GB-en`.


## PSEUDO SELECTORS

 There are two types of pseudo-selectors: 

- Pseudo Class Selectors.
- Pseudo Element Selectors.

## PSEUDO CLASS SELECTORS

> A pseudo-class is used to define a special state of an element.

> For example, it can be used to:

> - style an element when a user mouses over it.
> - style visited and unvisited links.
> - style an element when it focus.     [w3schools](https://www.w3schools.com/css/css_pseudo_classes.asp) 

**Pseudo-class** names are not case-sensitive. 

`:Hover` is the same as `:hover`. I will advise you always use small letters when writing selectors.

The colon (:) character represents Pseudo class selectors.

**The syntax for Pseudo class selector is:**

```
selector:pseudo-class {
property: value;
}
```

There are 3 main types of Pseudo-class selectors:

- User Action Pseudo-classes.
- link Pseudo-classes.
- Structural And Positional Pseudo-classes.

## USER ACTION PSEUDO-CLASSES

User Action Pseudo-classes works when the user interacts with your web page. 

The most used User Action Pseudo-classes are:

- :hover
- :active
- :focus


### :hover

`:hover` works when the user moves their cursor over an element but does not select it.

**The syntax for `:hover` selector is:**

```
selector:hover {
property: value;
}
```
%[https://codepen.io/cesscode/pen/QWdaZYw]

In the example above, the color of the link will change to red when you hover over the link.


### :Active

> The :active selector is used to select and style the active link.

> A link becomes active when you click on it.  :active selector can be used on all elements, not only links.


**The syntax for `:active` selector is:**

```
selector:active {
property: value;
}
```


### :focus

 The `:focus` selects an element that is being focused on by the user. "focused on by the user" means it accepts keyboard or any other user input. 

> It works on user input elements used in forms and is triggered as soon as the user clicks on it.

**The syntax for `:focus` selector is:**

```
selector:focus {
property: value;
}
```

%[https://codepen.io/cesscode/pen/OJWzBWB]

The background color of the input field when focused changes to yellow in the example above ⬆️.


## link Pseudo-classes 

There are two link pseudoclasses:

- `:link`
-  `:visited`

### :link

Link Pseudo class selector selects a link that the user has not visited before.

**The syntax for link selector is:**

```
selector:link {
property: value;
}
```

### :visited

`:visited` selects a link that the user has clicked on.

> Use them to control the colors of the links and also whether they are to appear underlined or not.

**The syntax for `:visited` selector is:** 

```
:visited {
property: value;
}
```


`:visited` can be overridden by a link pseudo-class with equal specificity.

> If there are two or more conflicting CSS rules that point to the same element, the browser follows some rules to determine which one is most specific and therefore wins out.

> Think of specificity as a score/rank that determines which style declarations are ultimately applied to an element.   [W3schools](https://www.w3schools.com/css/css_specificity.asp) 

To make link pseudo-class work, It is advisable to use the LVHA rule in the exact order to style them

LVHA stands for: 
- a:link
- a:visited
- a:hover
- a:active
- a:focus

%[https://codepen.io/cesscode/pen/zYErbKL]

## Structural And Positional Pseudo-classes.

The most common structural and positional pseudo-classes you will likely come across are the:

- :first-child
- :last-child 
- :Only-child

### :first-child

Applies style to the first child of the element.

**The syntax for `:first-child` selector is:** 

```
:first-child {
property: value;
}
```

### last-child

Applies style to an element if is the last child within its parent.

**The syntax for `:last-child` selector is:** 

```
:last-child {
property: value;
}
```

%[https://codepen.io/cesscode/pen/NWaNqVx]


In the above example: 

- `li:first-child` selects line 1 cause is the first list item within the list.

- `li:last-child` selects line 4 cause is the last item within the list.




### :Only-child

Applies style to an element if is the only element within a parent.

**The syntax for `:only-child` selector is:** 

```
:only-child {
property: value;
}
```

**Example**

```
<ul>
<li>The first child will be red</li>
</ul
```

 **Styling the above  ⬆️  Html code:** 

```
li:only-child {
background-color: red;
color: white;
padding: .7em;
}
```
The above ⬆️ CSS styles will apply `background-color: red;` to the `<li>` element cause is the only child.


## PSEUDO ELEMENTS

> A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s) [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) 

The double colon (::) represents pseudo-element selectors.

**The syntax for Pseudo element selector is:**

```
selector::pseudo-element {
property: value;
}
```

### Textual Pseudo-elements

The textual pseudo-elements consist of the:

- ::first-letter pseudo-element
- :first-line pseudo-element




### ::first-letter pseudo-element

`::first-letter` applies the style to the first letter of the element

**The syntax for `::first-letter` Pseudo element selector is:**

```
selector::first-letter {
property: value;
}
```


### ::first-line pseudo-element

`::first-line` applies the style to the first line of the element

**The syntax for `::first-line` Pseudo element selector is:**

```
selector::first-line {
property: value;
}
```

Both the `::first-line` and the `::first-letter` pseudo-element work only for block elements


%[https://codepen.io/cesscode/pen/qBPZObQ]


## Generated Content Pseudo-elements

The generated pseudo-element consist of the:

- ::before pseudo-element
- ::after pseudo-element


### ::before pseudo-element

`::before` adds content before the HTML element.

**The syntax for `::before` Pseudo element selector is:**

```
selector::before {
property: value;
}
```

### ::after pseudo-element

`::after` adds content after the HTML element.

**The syntax for `::after` Pseudo element selector is:**

```
selector::first-line {
property: value;
}
```
When using the  `::after` and `::before` pseudo-elements you must use the  `content` property to make your styles visible.

%[https://codepen.io/cesscode/pen/mdBPeMJ]

In the example above ⬆️, I added `'` to before and after the `<p>` element. You can also add images using the `content: URL("image_link.jpg")`


## Difference between pseudo-class and pseudo-element

The two main differences between a pseudo-class and pseudo-element are:

> 1.
Pseudo-elements are preceded with two colons `::` instead of one, although these days modern browsers are more forgiving and support both `:` and double  `::` colons for the pseudo-elements. It is best practice to use double colons `::`

> 2.
Pseudo-classes are all about the state, states like a visited link, a focused input field, an image that is being hovered upon, e.tc. While pseudo-elements are used to style sections or a particular part of an element, things like the first letter in a word, first-line e.tc.



**Check out some of these resources for a more in-depth look into CSS pseudo-classes and pseudo-elements:**

- [W3schools CSS Pseudo-elements](https://www.w3schools.com/css/css_pseudo_elements.asp)

- [MDN CSS Pseudo-elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)

- [MDN CSS Pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)




## CONCLUSION

I hope you enjoyed this post and that it helps you on your way to becoming a better front-end developer.

Start experimenting with the various CSS selectors to see how you can improve your CSS code.

If you found this article helpful, please like and share it 💙.

That's all for today! 😁 You reached the end of the article 😍.

<iframe src="https://giphy.com/embed/2UqWGeC4upMYXtvqR8" width="250" height="270" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/espn-smile-drake-drizzy-2UqWGeC4upMYXtvqR8"></a></p>