CSS Advanced Attribute Selectors

Advanced Attribute Selectors

Using special operators, advanced attribute selectors compare just part of an attribute's value.

CSS [attribute^="value"] Selector

When an attribute's value starts with a given value, [attribute^="value"] matches that element.

Example

Any element whose class attribute value begins with "top" is selected here.

Select all elements with a class attribute value that starts with "top" using the [class^="top"] selector and set their background to yellow. Include an h1 with class "top", a paragraph with class "top-text", and a paragraph with class "topcontent" to demonstrate matching.

> Output: complete HTML page

Prompt

Select all elements with a class attribute value that starts with "top" using the [class^="top"] selector and set their background to yellow. Include an h1 with class "top", a paragraph with class "top-text", and a paragraph with class "topcontent" to demonstrate matching.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS [attribute^="value"] Selector</title>
<style>
[class^="top"] {
  background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute^="value"] Selector</h2>

<h1 class="top">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>

</body>
</html>

CSS [attribute$="value"] Selector

To match on the end of a value instead, use [attribute$="value"]: it picks elements whose attribute value ends with the given value.

Example

Here, any element whose class attribute value finishes with "test" is selected.

Select all elements with a class attribute value that ends with "test" using the [class$="test"] selector and set their background to yellow. Include a div with class "first_test", a div with class "second", a div with class "my-test", and a paragraph with class "mytest" to demonstrate matching.

> Output: complete HTML page

Prompt

Select all elements with a class attribute value that ends with "test" using the [class$="test"] selector and set their background to yellow. Include a div with class "first_test", a div with class "second", a div with class "my-test", and a paragraph with class "mytest" to demonstrate matching.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS [attribute$="value"] Selector</title>
<style>
[class$="test"] {
  background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute$="value"] Selector</h2>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

</body>
</html>

CSS [attribute*="value"] Selector

The position of the match does not matter for [attribute*="value"]. An element is selected if its attribute value contains the given value anywhere.

Example

Here, any element with "te" somewhere in its class attribute value is selected.

Select all elements with a class attribute value that contains "te" using the [class*="te"] selector and set their background to yellow. Include a div with class "first_test", a div with class "second", a div with class "my-test", and a paragraph with class "mytest" to demonstrate matching.

> Output: complete HTML page

Prompt

Select all elements with a class attribute value that contains "te" using the [class*="te"] selector and set their background to yellow. Include a div with class "first_test", a div with class "second", a div with class "my-test", and a paragraph with class "mytest" to demonstrate matching.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS [attribute*="value"] Selector</title>
<style>
[class*="te"] {
  background: yellow;
}
</style>
</head>
<body>

<h2>CSS [attribute*="value"] Selector</h2>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>

</body>
</html>

Style Form Elements With Attribute Selectors

Form elements are a handy target for attribute selectors, because you can style them according to their input type.

Example

Attribute selectors give text inputs and button inputs different styles here.

Style form input elements using CSS attribute selectors based on input type. Use input[type="text"] to set width 150px, padding 6px, margin-bottom 10px, and background-color pink. Use input[type="button"] to set width 100px, padding 6px, and background-color lightgreen. Include a form with text inputs for First Name and Last Name and a Submit button of type "button".

> Output: complete HTML page

Prompt

Style form input elements using CSS attribute selectors based on input type. Use input[type="text"] to set width 150px, padding 6px, margin-bottom 10px, and background-color pink. Use input[type="button"] to set width 100px, padding 6px, and background-color lightgreen. Include a form with text inputs for First Name and Last Name and a Submit button of type "button".

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style Form Elements With Attribute Selectors</title>
<style>
input[type="text"] {
  width: 150px;
  padding: 6px;
  margin-bottom: 10px;
  background-color: pink;
}

input[type="button"] {
  width: 100px;
  padding: 6px;
  background-color: lightgreen;
}
</style>
</head>
<body>

<h2>Styling Forms with Attribute Selectors</h2>

<form>
  <label for="fname">First Name</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last Name</label><br>
  <input type="text" id="lname" name="lname"><br>
  <input type="button" value="Submit">
</form>

</body>
</html>

All CSS Attribute Selectors

[attribute] — Matches when the attribute is present on the element.
[attribute=value] — Matches when the attribute has this exact value.
[attribute~=value] — Matches when the attribute value includes this word.
[attribute|=value] — Matches the value itself, or the value followed by a hyphen.
[attribute^=value] — Matches when the value begins with this value.
[attribute$=value] — Matches when the value finishes with this value.
[attribute*=value] — Matches when the value includes this value.