Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
194 views

W3schools: CSS Attribute Selectors

This document discusses CSS attribute selectors, which allow styling of HTML elements based on attributes or attribute values. It describes several attribute selector types including [attribute], [attribute="value"], [attribute~="value"], [attribute|="value"], [attribute^="value"], [attribute$="value"], and [attribute*="value"]. Examples are given for each to style elements with specific attributes like target, class, and type. The attribute selectors can be useful for styling forms without classes or IDs.

Uploaded by

Arta Rizki
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
194 views

W3schools: CSS Attribute Selectors

This document discusses CSS attribute selectors, which allow styling of HTML elements based on attributes or attribute values. It describes several attribute selector types including [attribute], [attribute="value"], [attribute~="value"], [attribute|="value"], [attribute^="value"], [attribute$="value"], and [attribute*="value"]. Examples are given for each to style elements with specific attributes like target, class, and type. The attribute selectors can be useful for styling forms without classes or IDs.

Uploaded by

Arta Rizki
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

CSS Attribute Selector https://www.w3schools.com/css/css_attribute_selectors.

asp

w3schools.com
THE WORLD'S LARGEST WEB DEVELOPER SITE

☰  HTML CSS JAVASCRIPT MORE   

Stop seeing this ad Why this ad?

CSS Attribute Selectors


❮ Previous Next ❯

Style HTML Elements With Specific Attributes


It is possible to style HTML elements that have specific attributes or attribute values.

CSS [attribute] Selector


The [attribute] selector is used to select elements with a specified attribute.

The following example selects all <a> elements with a target attribute:

Example

a[target] {
background-color: yellow;
}

Try it Yourself »

1 of 9 07/03/2017 9:53
CSS Attribute Selector https://www.w3schools.com/css/css_attribute_selectors.asp

CSS [attribute="value"] Selector


The [attribute="value"] selector is used to select elements with a specified attribute
and value.

The following example selects all <a> elements with a target="_blank" attribute:

Example

a[target="_blank"] {
background-color: yellow;
}

Try it Yourself »

CSS [attribute~="value"] Selector


The [attribute~="value"] selector is used to select elements with an attribute value
containing a specified word.

The following example selects all elements with a title attribute that contains a space-
separated list of words, one of which is "flower":

Example

[title~="flower"] {
border: 5px solid yellow;
}

2 of 9 07/03/2017 9:53
CSS Attribute Selector https://www.w3schools.com/css/css_attribute_selectors.asp

Try it Yourself »

The example above will match elements with title="flower", title="summer flower", and
title="flower new", but not title="my-flower" or title="flowers".

CSS [attribute|="value"] Selector


The [attribute|="value"] selector is used to select elements with the specified attribute
starting with the specified value.

The following example selects all elements with a class attribute value that begins with
"top":

Note: The value has to be a whole word, either alone, like class="top", or followed by a
hyphen( - ), like class="top-text"!

Example

[class|="top"] {
background: yellow;
}

Try it Yourself »

CSS [attribute^="value"] Selector


The [attribute^="value"] selector is used to select elements whose attribute value
begins with a specified value.

The following example selects all elements with a class attribute value that begins with
"top":

Note: The value does not have to be a whole word!

Example

[class^="top"] {
background: yellow;
}

3 of 9 07/03/2017 9:53
CSS Attribute Selector https://www.w3schools.com/css/css_attribute_selectors.asp

Try it Yourself »

CSS [attribute$="value"] Selector


The [attribute$="value"] selector is used to select elements whose attribute value
ends with a specified value.

The following example selects all elements with a class attribute value that ends with
"test":

Note: The value does not have to be a whole word!

Example

[class$="test"] {
background: yellow;
}

Try it Yourself »

CSS [attribute*="value"] Selector


The [attribute*="value"] selector is used to select elements whose attribute value
contains a specified value.

The following example selects all elements with a class attribute value that contains "te":

Note: The value does not have to be a whole word!

Example

[class*="te"] {
background: yellow;
}

Try it Yourself »

Styling Forms

4 of 9 07/03/2017 9:53
CSS Attribute Selector https://www.w3schools.com/css/css_attribute_selectors.asp

The attribute selectors can be useful for styling forms without class or ID:

Example

input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}

input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
}

Try it Yourself »

Tip: Visit our CSS Forms Tutorial for more examples on how to style forms with CSS.

Test Yourself with Exercises!


Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 »

Exercise 6 »

More Examples of CSS Selectors


Use our CSS Selector Tester to demonstrate the different selectors.

For a complete reference of all the CSS selectors, please go to our CSS Selectors
Reference.

❮ Previous Next ❯

5 of 9 07/03/2017 9:53

You might also like