CSS Attribute Selectors

Welcome to The Coding College! In this tutorial, we will explore CSS Attribute Selectors, a powerful tool for styling HTML elements based on their attributes. Attribute selectors allow you to apply styles dynamically, making your code cleaner and more efficient.

What Are CSS Attribute Selectors?

CSS Attribute Selectors target elements based on their HTML attributes or attribute values. For example, you can style links differently depending on whether they open in a new tab or specify an input type like text or password.

Syntax:

[attribute] {
    /* Styles go here */
}

Types of Attribute Selectors

There are several types of attribute selectors. Let’s break them down with examples.

1. [attribute]

This selects elements with a specific attribute, regardless of its value.

Example:

/* Select all elements with the 'title' attribute */
[title] {
    color: blue;
    text-decoration: underline;
}

HTML:

<p title="Tooltip text">This paragraph has a title.</p>
<p>This paragraph does not have a title.</p>

Output: The first paragraph will have blue, underlined text.

2. [attribute=”value”]

This selects elements with an attribute that exactly matches a specific value.

Example:

/* Select links that open in a new tab */
[a target="_blank"] {
    color: red;
    font-weight: bold;
}

HTML:

<a href="https://www.example.com" target="_blank">Open in a new tab</a>
<a href="https://www.example.com">Regular link</a>

Output: The first link will be red and bold.

3. [attribute~=”value”]

This selects elements where the attribute value contains a specific word (space-separated).

Example:

/* Select elements with the class 'highlight' */
[class~="highlight"] {
    background-color: yellow;
}

HTML:

<p class="highlight special">This is highlighted.</p>
<p class="special">This is not highlighted.</p>

Output: The first paragraph will have a yellow background.

4. [attribute|=”value”]

This selects elements where the attribute value starts with a specific value, followed by a -.

Example:

/* Select elements with language set to English (e.g., en, en-US) */
[lang|="en"] {
    font-style: italic;
}

HTML:

<p lang="en">This is in English.</p>
<p lang="en-US">This is in American English.</p>
<p lang="fr">This is in French.</p>

Output: The first two paragraphs will be italicized.

5. [attribute^=”value”]

This selects elements where the attribute value starts with a specific string.

Example:

/* Select links that start with 'https' */
[a href^="https"] {
    color: green;
}

HTML:

<a href="https://www.example.com">Secure link</a>
<a href="http://www.example.com">Regular link</a>

Output: The first link will be green.

6. [attribute$=”value”]

This selects elements where the attribute value ends with a specific string.

Example:

/* Select images with a .png extension */
[src$=".png"] {
    border: 2px solid blue;
}

HTML:

<img src="image1.png" alt="PNG Image">
<img src="image2.jpg" alt="JPG Image">

Output: The first image will have a blue border.

7. [attribute=”value”]*

This selects elements where the attribute value contains a specific string.

Example:

/* Select links that contain 'blog' in their href */
[a href*="blog"] {
    text-decoration: none;
    font-weight: bold;
}

HTML:

<a href="https://example.com/blog-post">Blog Post</a>
<a href="https://example.com/about">About Us</a>

Output: The first link will have bold text and no underline.

Combining Attribute Selectors

You can combine attribute selectors for more specific targeting.

Example:

/* Select buttons with a specific type and data attribute */
button[type="submit"][data-action="save"] {
    background-color: green;
    color: white;
    padding: 10px 20px;
}

HTML:

<button type="submit" data-action="save">Save</button>
<button type="submit" data-action="delete">Delete</button>

Output: Only the “Save” button will have the green background.

Practical Applications

  • Form Styling: Style input fields based on their type (e.g., text, email, password). 
input[type="text"] {
    border: 1px solid #ccc;
}
input[type="password"] {
    border: 1px solid red;
}
  • Custom Tooltips: Highlight elements with title attributes for better user experience.
  • Theming: Use data attributes to apply different themes or states. 
[data-theme="dark"] {
    background-color: #333;
    color: #fff;
}

Summary

CSS Attribute Selectors provide a flexible way to target HTML elements based on their attributes and attribute values. They are incredibly useful for:

  • Dynamic Styling: Apply styles based on states or content.
  • Cleaner Code: Avoid adding extra classes or IDs unnecessarily.
  • Improved Performance: Maintain reusable, scalable styles.

For more practical coding tips and tricks, visit The Coding College. Start using CSS Attribute Selectors today to make your stylesheets smarter and more efficient!

Happy Coding!

Leave a Comment