Advanced Selectors | Intermediate

Using advanced CSS selectors

CSS selectors are used to select and style HTML elements. Advanced selectors allow for more precise and powerful targeting of elements, enhancing the ability to create sophisticated styles. This tutorial covers various advanced CSS selectors and their usage.

Key Points:

Advanced selectors provide more precise control over styling.
They include combinators, attribute selectors, pseudo-classes, and pseudo-elements.
Advanced selectors can enhance the maintainability and efficiency of your CSS code.

Combinators

Combinators describe the relationship between selectors. There are four types of combinators in CSS:

Descendant Selector (space): Selects all elements that are descendants of a specified element.
```
div p {
    color: blue;
}
                        
```
This selects all <p> elements inside <div> elements.
Child Selector (>): Selects all elements that are direct children of a specified element.
```
div > p {
    color: red;
}
                        
```
This selects all <p> elements that are direct children of <div> elements.
Adjacent Sibling Selector (+): Selects an element that is the next sibling of a specified element.
```
h1 + p {
    font-style: italic;
}
                        
```
This selects the <p> element that immediately follows an <h1> element.
General Sibling Selector (~): Selects all elements that are siblings of a specified element.
```
h1 ~ p {
    color: green;
}
                        
```
This selects all <p> elements that are siblings of an <h1> element.

Attribute Selectors

Attribute selectors allow you to select elements based on the presence or value of an attribute:

Presence Selector: Selects elements with a specified attribute.
```
a[target] {
    color: orange;
}
                        
```
This selects all <a> elements with a target attribute.
Value Selector: Selects elements with a specified attribute value.
```
a[target="_blank"] {
    color: purple;
}
                        
```
This selects all <a> elements with a target attribute value of _blank.
Substring Matching Selectors:
- [attr^="value"]: Selects elements whose attribute value starts with a specified value.
- [attr$="value"]: Selects elements whose attribute value ends with a specified value.
- [attr*="value"]: Selects elements whose attribute value contains a specified value.
```
input[type^="text"] {
    background-color: lightblue;
}

input[name$="name"] {
    border: 1px solid red;
}

input[placeholder*="search"] {
    font-style: italic;
}
                        
```
These examples select input elements based on their type, name, and placeholder attributes.

Pseudo-Classes

Pseudo-classes are used to define the special state of an element. Here are some common pseudo-classes:

:hover: Selects elements when the user hovers over them.
```
button:hover {
    background-color: yellow;
}
                        
```
This changes the background color of <button> elements when hovered over.
:focus: Selects elements when they are focused.
```
input:focus {
    border-color: blue;
}
                        
```
This changes the border color of <input> elements when they are focused.
:nth-child(n): Selects the nth child of an element.
```
ul li:nth-child(2) {
    font-weight: bold;
}
                        
```
This selects the second <li> element in an <ul> and makes it bold.
:nth-of-type(n): Selects the nth child of a specified type.
```
p:nth-of-type(2) {
    color: red;
}
                        
```
This selects the second <p> element of its type and changes its color to red.

Pseudo-Elements

Pseudo-elements are used to style specified parts of an element. Here are some common pseudo-elements:

::before: Inserts content before an element.


h1::before {
    content: "★ ";
    color: gold;
}

This inserts a gold star before <h1> elements.

::after: Inserts content after an element.


h1::after {
    content: " ★";
    color: gold;
}

This inserts a gold star after <h1> elements.

::first-line: Styles the first line of a text block.
```
p::first-line {
    font-weight: bold;
}
                        
```
This makes the first line of <p> elements bold.
::first-letter: Styles the first letter of a text block.
```
p::first-letter {
    font-size: 2em;
    color: red;
}
                        
```
This enlarges and changes the color of the first letter of <p> elements.

Summary

In this tutorial, you learned about using advanced CSS selectors, including combinators, attribute selectors, pseudo-classes, and pseudo-elements. These selectors allow for more precise and powerful targeting of HTML elements, enhancing the ability to create sophisticated and efficient styles. Understanding and using advanced selectors can significantly improve the maintainability and efficiency of your CSS code.