Chapter 14: Pseudo-classes and Pseudo-elements

Pseudo-classes and pseudo-elements in CSS provide additional ways to style elements based on their state or specific parts, allowing for more dynamic and nuanced design.

1. Pseudo-classes

Pseudo-classes are used to define the special state of an element. They are preceded by a colon (:) and allow you to apply styles based on user interactions, element states, or structural positions.

Common Pseudo-classes

:hover: Applies styles when the user hovers over an element.
```
a:hover {
  color: red;
}
```
:focus: Applies styles when an element receives focus (e.g., input fields).
```
input:focus {
  border-color: blue;
}
```
:active: Applies styles when an element is being activated (e.g., when a button is pressed).
```
button:active {
  background-color: green;
}
```
:visited: Applies styles to visited links.
```
a:visited {
  color: purple;
}
```
:first-child: Targets the first child of a parent element.
```
ul > li:first-child {
  font-weight: bold;
}
```
:last-child: Targets the last child of a parent element.
```
ul > li:last-child {
  margin-bottom: 0;
}
```

:nth-child(n): Targets the nth child of a parent element. n can be a number, keyword, or formula.

ul > li:nth-child(odd) {
  background-color: #f0f0f0;
}

ul > li:nth-child(2n) {
  background-color: #e0e0e0;
}

:not(selector): Applies styles to elements that do not match the given selector.
```
p:not(.special) {
  color: gray;
}
```
:empty: Targets elements that have no children (including text nodes).
```
div:empty {
  display: none;
}
```

2. Pseudo-elements

Pseudo-elements are used to style specific parts of an element. They are preceded by two colons (::) and allow for fine-grained styling of content.

Common Pseudo-elements

::before: Inserts content before the content of an element.

.quote::before {
  content: "“";
  font-size: 2em;
  color: gray;
}

::after: Inserts content after the content of an element.

.quote::after {
  content: "”";
  font-size: 2em;
  color: gray;
}

::first-line: Styles the first line of a block-level element.
```
p::first-line {
  font-weight: bold;
}
```
::first-letter: Styles the first letter of a block-level element.
```
p::first-letter {
  font-size: 2em;
  color: red;
}
```
::selection: Styles the portion of the element that is selected by the user.
```
::selection {
  background: yellow;
  color: black;
}
```

3. Combining Pseudo-classes and Pseudo-elements

You can combine pseudo-classes and pseudo-elements to target specific scenarios. For example, you might want to style the first letter of an element when it is in a specific state.

p:hover::first-letter {
  font-size: 3em;
  color: blue;
}

4. Browser Compatibility

Most modern browsers support pseudo-classes and pseudo-elements. However, it is always good practice to check compatibility if you are targeting older versions of browsers.

5. Practical Examples

Highlighting Links on Hover

<a href="#">Hover over me</a>

a:hover {
  text-decoration: underline;
  color: red;
}

Styling List Items

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

li:nth-child(odd) {
  background-color: #f0f0f0;
}

li:nth-child(even) {
  background-color: #e0e0e0;
}

Adding Decorative Quotes

<blockquote class="quote">This is a quote.</blockquote>

.quote::before {
  content: "“";
  font-size: 2em;
  color: gray;
}

.quote::after {
  content: "”";
  font-size: 2em;
  color: gray;
}

Styling the First Line of a Paragraph

<p>This is a paragraph with some text.</p>

p::first-line {
  font-weight: bold;
  color: darkblue;
}

Conclusion

Pseudo-classes and pseudo-elements are powerful tools in CSS that allow you to apply styles based on the state of an element or target specific parts of it. Mastering these concepts can greatly enhance your ability to create dynamic and sophisticated designs.