Attribute Selectors in CSS

1. Types of Attribute Selectors

Attribute selectors in CSS let you target HTML elements based on their attribute values, like id, class, name, type, and others. They provide flexibility and precision for selecting elements, which is especially useful for styling form elements, links, and other elements with unique attributes. In this article, we'll explore different types of attribute selectors and how to use them.

Attribute selectors can be categorized into several types that allow selecting elements based on the presence of an attribute, its exact value, or part of its value. The main types of attribute selectors are:

1. Attribute Selector: selects elements that have a specific attribute, regardless of its value.
2. Attribute Selector with a Specific Value: selects elements with an attribute that matches a specific value.
3. Attribute Selector with a Starting Value: selects elements where the attribute value starts with a specific prefix.
4. Attribute Selector with an Ending Value: selects elements where the attribute value ends with a specific suffix.
5. Attribute Selector Containing a Value: selects elements where the attribute value contains a specific substring.
6. Attribute Selector with Whitespace Separation: selects elements with an attribute whose value contains a specific word, separated by spaces.
7. Attribute Selector with Hyphenated Separation: selects elements with an attribute whose value contains a specific word, separated by hyphens.

2. The Attribute Selector

The attribute selector selects elements that have a specific attribute, regardless of its value. This selector is useful when you need to target all elements with a certain attribute.

input[type] {
  border: 1px solid black;
}

<input type="text">
<input type="password">
<input type="email">
<input>

In this example, all <input> elements with the type attribute will get a black border, regardless of the value of the attribute.

3. Attribute Selector with a Specific Value

The attribute selector with a specific value targets elements with an attribute that matches a specific value. This is helpful when you need to select elements with a certain attribute value, such as all text fields or links that open in a new tab.

    
input[type="text"] {
  background-color: #f0f0f0;
}
    
  

    
<input type="text">
<input type="password">
<input type="email">
    
  

Here, only the text field <input type="text"> will get a light gray background.

4. Attribute Selector with a Starting Value

The attribute selector with a starting value selects elements where the value of the attribute starts with a specific prefix. The prefix is specified after the ^= symbol. This selector is handy for selecting all links pointing to a specific website.

    
a[href^="https://example.com"] {
  color: green;
}
    
  

    
<a href="https://example.com/page1">Link to example.com</a>
<a href="https://another.com">Another link</a>
    
  

Only the first link will be colored green because it starts with "https://example.com".

5. Attribute Selector with an Ending Value

The attribute selector with an ending value selects elements where the value of the attribute ends with a specific suffix. The suffix is specified after the $= symbol. This selector is useful for targeting files of a certain type, like images in the .png format.

    
img[src$=".png"] {
  border: 2px solid blue;
}
    
  

    
<img src="image1.png" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
    
  

Here, only images with the .png extension will have a blue border.

6. Attribute Selector Containing a Value

The attribute selector containing a value selects elements where the value of the attribute contains a specific substring. The substring is specified after the *= symbol. This selector is useful when you need to select elements with an attribute value that contains a specific part, such as links to a particular site section.

    
a[href*="section"] {
  font-weight: bold;
}
    
  

    
<a href="https://example.com/section1">Link to section 1</a>
<a href="https://example.com/about">About us</a>
<a href="https://example.com/section2">Link to section 2</a>
    
  

Only links containing "section" in their href will be bold.

1

Task

Python SELF EN, level 30, lesson 3

Locked

Using Attribute Selector

Using Attribute Selector

Open

2

Task

Python SELF EN, level 30, lesson 3

Locked

Applying an Attribute Selector with a Value

Applying an Attribute Selector with a Value

Open

3

Task

Python SELF EN, level 30, lesson 3

Locked

Attribute Selectors with Starting and Ending Values

Attribute Selectors with Starting and Ending Values

Open

4

Task

Python SELF EN, level 30, lesson 3

Locked

Complex Usage of Attribute Selectors

Complex Usage of Attribute Selectors

Open