Chapter 6: CSS Selectors: Advanced and Combinators

In this chapter, we'll explore advanced CSS selectors and combinators, which allow you to apply styles more precisely and efficiently. Mastery of these selectors can enhance your ability to target and style elements based on complex criteria.

1. Advanced CSS Selectors

Advanced CSS selectors offer more specific ways to target elements based on attributes, states, and more.

Attribute Selectors

Attribute selectors allow you to target elements based on the presence or value of attributes.

[attribute]: Selects elements with a specific attribute.

[type] {
  /* styles for elements with the 'type' attribute */
}

[attribute="value"]: Selects elements with an attribute that has a specific value.

[type="text"] {
  /* styles for elements with 'type' attribute equal to 'text' */
}

[attribute~="value"]: Selects elements with an attribute whose value is a space-separated list containing the specified value.
```
[class~="highlight"] {
  /* styles for elements with a class containing 'highlight' */
}
```
[attribute|="value"]: Selects elements with an attribute value that starts with the specified value, followed by a hyphen.
```
[lang|="en"] {
  /* styles for elements with a 'lang' attribute starting with 'en-' */
}
```

[attribute^="value"]: Selects elements with an attribute whose value starts with the specified value.

[src^="https://"]
{
  /* styles for elements with a 'src' attribute starting with 'https://' */
}

[attribute$="value"]: Selects elements with an attribute whose value ends with the specified value.
```
[href$=".pdf"] {
  /* styles for elements with a 'href' attribute ending with '.pdf' */
}
```

[attribute*="value"]: Selects elements with an attribute whose value contains the specified value.

[title*="tooltip"] {
  /* styles for elements with a 'title' attribute containing 'tooltip' */
}

Pseudo-Class Selectors

Pseudo-classes apply styles to elements in specific states or positions.

:hover: Applies styles when an element is hovered over.
```
a:hover {
  color: red;
}
```
:focus: Applies styles when an element has focus (e.g., input fields).
```
input:focus {
  border-color: blue;
}
```
:active: Applies styles when an element is being activated (e.g., clicked).
```
button:active {
  background-color: darkgray;
}
```
:visited: Applies styles to visited links (note: modern browsers limit its use due to privacy concerns).
```
a:visited {
  color: purple;
}
```
:nth-child(n): Selects elements based on their position in a parent.
```
li:nth-child(odd) {
  background-color: #f0f0f0;
}
```
:nth-of-type(n): Selects elements based on their position among siblings of the same type.
```
p:nth-of-type(2) {
  font-weight: bold;
}
```
:last-child: Selects the last child element of a parent.
```
p:last-child {
  margin-bottom: 0;
}
```
:first-of-type: Selects the first element of a specified type among siblings.
```
p:first-of-type {
  color: green;
}
```
:not(selector): Selects elements that do not match the specified selector.
```
div:not(.highlight) {
  background-color: lightgray;
}
```

2. Combinators

Combinators describe the relationships between elements and how they can be selected.

Descendant Combinator (space)

Selects elements that are descendants of another element.

div p {
  color: red;
}

Styles all <p> elements that are inside a <div>.

Child Combinator (>)

Selects elements that are direct children of another element.

ul > li {
  list-style-type: none;
}

Styles only <li> elements that are direct children of <ul>.

Adjacent Sibling Combinator (+)

Selects an element that is immediately preceded by a specified element.

h1 + p {
  margin-top: 0;
}

Styles the first <p> element immediately following an <h1>.

General Sibling Combinator (~)

Selects all elements that are siblings of a specified element.

h2 ~ p {
  color: blue;
}

Styles all <p> elements that are siblings following an <h2>.

3. Practical Applications

Styling Forms: Use pseudo-classes and attribute selectors to style form elements based on their state or attributes.
```
input[type="text"]:focus {
  border-color: green;
}
```
Highlighting Table Rows: Use pseudo-classes to style rows in a table.
```
tr:nth-child(even) {
  background-color: #f2f2f2;
}
```
Responsive Layouts: Use combinators and pseudo-classes to create complex layouts and adjust styles based on user interactions.