Pseudo-selectors and Pseudo-elements Tips

CSS3 Basics

Introduction

Pseudo-selectors and pseudo-elements are essential tools in CSS3, allowing developers to manipulate elements based on conditions or to insert content before or after elements. These features extend the capabilities of standard selectors, enabling more nuanced control over the DOM.

Types of Pseudo-selectors

Pseudo-selectors are selectors that match elements based on specific conditions, such as their position, state, or context. Key types include:

:target
Selects elements based on the value of the target attribute.
```
.highlight:target {  
  background-color: yellow;  
}  
```
Example: A link with target="section1" highlights the section.
:hover
Applies styles when the user hovers over an element.
```
.button:hover {  
  color: red;  
}  
```
Example: A button changes color on mouseover.
:focus
Applies styles when an element is focused (e.g., via keyboard navigation).
```
.input:focus {  
  border-color: blue;  
}  
```
Example: An input field gains a blue border when focused.
:nth-child
Selects elements based on their position within a parent container.
```
.box:nth-child(even) {  
  background-color: #f0f0f0;  
}  
```
Example: Even-numbered boxes have a lighter background.
:not()
Negates a selector, allowing for complex conditions.
```
.highlight:not(.disabled) {  
  color: green;  
}  
```
Example: Highlights elements that are not disabled.

Types of Pseudo-elements

Pseudo-elements are inserted content before or after elements, often used for styling or layout. Key types include:

::before
Inserts content before the content of an element.
```
.heading::before {  
  content: "Subtitle ";  
  font-size: 0.8em;  
}  
```
Example: A heading displays a subtitle before the main text.
::after
Inserts content after the content of an element.
```
.heading::after {  
  content: " (Note)";  
  color: #999;  
}  
```
Example: A heading displays a note after the main text.
:root
Selects the root element of the document, often used for global styles.
```
:root {  
  --primary-color: blue;  
}  
```
Example: A global variable --primary-color is defined here.
:lang()
Selects elements based on the language of their content.
```
.title:lang(en) {  
  font-weight: bold;  
}  
```
Example: English titles are styled with bold font.
:focus-visible
Applies styles when an element is focused via a keyboard.
```
.input:focus-visible {  
  outline: 2px solid #4CAF50;  
}  
```
Example: An input field gains a focus outline on keyboard navigation.

Syntax and Usage

Pseudo-selectors and pseudo-elements are written using the : and :: prefixes. They can be combined with regular selectors for advanced targeting.

Combined Selectors
```
.box:hover::after {  
  content: "Click me";  
  color: red;  
}  
```
Example: A box’s after pseudo-element changes to "Click me" on hover.

Nested Selectors

.container .item:target::before {  
  content: "Selected";  
  font-weight: bold;  
}

Example: A targeted item displays a selected label.

Best Practices and Common Pitfalls

Avoid Overuse: Use pseudo-selectors sparingly to prevent performance issues.
Check Syntax: Ensure correct syntax (e.g., ::before vs ::before with spaces).
Test in Browsers: Verify behavior across different browsers and devices.
Avoid Conflicts: Use :not() to avoid unintended selections.

Examples and Code Blocks

/* Example 1: Hover effect */  
.button:hover {  
  color: red;  
  background: #e0e0e0;  
}  

/* Example 2: Pseudo-element insertion */  
.heading::before {  
  content: "Subtitle ";  
  font-size: 0.8em;  
}  

/* Example 3: Conditional styling */  
/* Matches elements with even indices */  
.box:nth-child(even) {  
  background-color: #f0f0f0;  
}  

/* Example 4: Focus state */  
.input:focus {  
  border-color: blue;  
  outline: none;  
}

Pseudo-selectors and Pseudo-elements Tips