Attribute Selectors and Basic Combinators

TL;DR

Attribute selectors let you target HTML elements based on their attributes and their values, giving you precise control over styling. Combinators define the relationship between selectors, allowing you to select elements that are siblings, children, or descendants of other elements. Together, they provide powerful ways to style specific parts of your web page structure.

1. The Mental Model

Imagine you're trying to pick out specific books from a library shelf. Attribute selectors are like picking books based on their cover color or whether they have a specific sticker. Combinators are like picking books that are right next to each other, or only the ones on the top shelf, or any book inside a particular box.

2. The Core Material

CSS provides ways to select elements not just by their tag name or class, but by the attributes they possess and how those attributes relate to values.

Attribute Selectors

Photo by David Eluwole on Pexels

Attribute selectors allow you to target elements based on the presence or value of an HTML attribute.

Here are the main types:

• [attribute]: Selects all elements that have the specified attribute, regardless of its value.
  css a[href] { color: orange; /* Any link with an href attribute */ }
• [attribute="value"]: Selects all elements where the attribute has an exact matching value. This is case-sensitive for most attributes.
  css input[type="text"] { border: 1px solid blue; /* Only text input fields */ }
• [attribute~="value"]: Selects elements where the attribute's value contains a specified word within a space-separated list.
  css div[class~="highlight"] { background-color: yellow; /* Divs with "highlight" as one of their classes */ }
• [attribute|="value"]: Selects elements where the attribute's value either is the specified value or starts with the specified value immediately followed by a hyphen (-). This is often used for language codes.
  css [lang|="en"] { font-family: Arial, sans-serif; /* Elements with lang="en" or lang="en-US" etc. */ }
• [attribute^="value"]: Selects elements where the attribute's value starts with the specified string.
  css a[href^="https://"] { color: green; /* Links starting with "https://" */ }
• [attribute$="value"]: Selects elements where the attribute's value ends with the specified string.
  css a[href$=".pdf"] { font-weight: bold; /* Links ending with ".pdf" */ }
• [attribute*="value"]: Selects elements where the attribute's value contains the specified string anywhere.
  css [title*="important"] { border: 2px dashed red; /* Elements with "important" anywhere in their title */ }

Basic Combinators

Photo by Kostiantyn Klymovets on Pexels

Combinators explain the relationship between multiple selectors.

Here's a breakdown:

• Descendant Selector (Space ): Selects elements that are descendants (children, grandchildren, etc.) of another element.
  css div p { color: purple; /* Selects all <p> elements inside any <div> */ }
• Child Selector (>): Selects elements that are direct children of another element.
  css ul > li { list-style-type: square; /* Selects <li> elements that are direct children of a <ul> */ }
• Adjacent Sibling Selector (+): Selects an element that is immediately preceded by another specific element, and both share the same parent.
  css h1 + p { margin-top: 0; /* Selects a <p> element immediately following an <h1> */ }
• General Sibling Selector (~): Selects all elements that are siblings of a specified element and appear after it. They must share the same parent.
  css h2 ~ p { background-color: lightgrey; /* Selects all <p> elements that are siblings of an <h2> and come after it */ }

Here's a diagram to help visualize the combinators:

graph TD
    A["Parent Element"] --> B["Child Element 1"]
    A --> C["Child Element 2"]
    B --> D["Grandchild Element"]
    C --> E["Grandchild Element"]
    C --- F["Adjacent Sibling Element"]
    C --- G["General Sibling Element"]

    subgraph "Combinator Relationships"
        Descendant["Descendant (Space)"]
        Child["Child (>)"]
        AdjacentSibling["Adjacent Sibling (+)"]
        GeneralSibling["General Sibling (~)"]
    end

    Descendant --> H["e.g., A D (Selects Grandchild D from Parent A)"]
    Child --> I["e.g., A > B (Selects Child B directly from Parent A)"]
    AdjacentSibling --> J["e.g., C + F (Selects Sibling F immediately after C)"]
    GeneralSibling --> K["e.g., C ~ G (Selects Sibling G after C, not necessarily immediate)"]

3. Worked Example

Let's say you have this HTML:

<div class="container">
  <h1>My Awesome Page</h1>
  <p>This is a paragraph about awesome stuff.</p>
  <a href="https://example.com/info.html" target="_blank">More Info</a>
  <p class="summary warning">Another important paragraph.</p>
  <section>
    <p>A paragraph inside a section.</p>
    <a href="/download/file.zip">Download File</a>
  </section>
</div>
<p>This paragraph is outside the container.</p>
<input type="email" placeholder="Your Email">
<input type="text" value="Hello">

Now, let's apply some CSS using attribute selectors and combinators:

/* 1. Target links with 'target' attribute */
a[target] {
  text-decoration: none;
  border-bottom: 1px dotted blue;
}

/* 2. Target paragraphs that have 'warning' in their class list */
p[class~="warning"] {
  color: red;
  font-weight: bold;
}

/* 3. Target links whose href starts with "https://" */
a[href^="https://"] {
  background-color: lightgreen;
}

/* 4. Target input fields with type="email" */
input[type="email"] {
  border: 2px solid purple;
}

/* 5. Target all paragraphs directly inside the div with class "container" */
div.container > p {
  padding: 10px;
  background-color: #eee;
}

/* 6. Target any paragraph that comes after an h1, anywhere in the document */
h1 ~ p {
  font-style: italic;
}

/* 7. Target only the <a> element immediately following a <p> within the section */
section p + a {
  color: navy;
  text-transform: uppercase;
}

Explanation:
1. The first rule makes the "More Info" link have a dotted blue underline because it has a target attribute.
2. The second rule makes "Another important paragraph." red and bold because its class attribute contains "warning".
3. The third rule colors the background of "More Info" green as its href starts with "https://".
4. The fourth rule adds a purple border to the email input field.
5. The fifth rule styles "This is a paragraph about awesome stuff." and "Another important paragraph." because they are direct children of .container. "A paragraph inside a section." is not a direct child of .container, so it's unaffected.
6. The sixth rule makes "This is a paragraph about awesome stuff." and "Another important paragraph." and "A paragraph inside a section." italic. "This paragraph is outside the container." is also italicized because it comes after the h1 in the document flow, even though it's outside the main div.
7. The seventh rule styles the "Download File" link because it immediately follows a p element, which is itself inside a section.

4. Key Takeaways

• Attribute selectors give you fine-grained control to select elements based on their HTML attributes and values.
• You can match attributes based on presence, exact value, parts of a space-separated list, start of value, end of value, or any part of the value.
• Combinators define the relationship between elements in your HTML structure for precise targeting.
• The descendant selector (space) matches any element nested inside another, no matter how deep.
• The child selector (>) only matches direct children of an element.
• Adjacent sibling (+) matches an element immediately following another element, sharing the same parent.
• General sibling (~) matches all elements following another element, sharing the same parent.

Common Mistakes to Avoid:
- Forgetting that [attribute="value"] is case-sensitive for most attributes.
- Confusing descendant (space) with child (>) selectors; one is broad, the other is strict.
- Misunderstanding the difference between ~= (word in space-separated list) and *= (substring anywhere).
- Not realizing adjacent (+) and general (~) sibling selectors only apply to elements that come after the reference element in the HTML.

5. Now Try It

Create a simple HTML page with a few div elements, some p tags, and some a tags. Include input fields of different types (e.g., text, password, number). Add various custom attributes (like data-status="active", data-theme="dark") and class lists.

Your task is to write CSS that:
1. Styles all a tags whose href attribute ends with .png to have a border: 2px solid green;.
2. Gives any p tag immediately following an h2 a background-color: lightblue;.
3. Changes the text color of any input field with type="password" to red.
4. Makes any div that contains data-theme="dark" have color: white; background-color: #333;.

You'll know you've succeeded when your CSS applies these specific styles correctly without affecting other unrelated elements on the page.