Scribd
Upload
57 views

CSS Attribute Selector

This document discusses different CSS attribute selectors that can be used to style HTML elements based on their attributes or attribute values. It explains selectors for elements with a specific attribute, attribute value, attribute value starting with or containing a value, and more.

Uploaded by

Mai Quang Vinh (K17CT)
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
57 views

CSS Attribute Selector

This document discusses different CSS attribute selectors that can be used to style HTML elements based on their attributes or attribute values. It explains selectors for elements with a specific attribute, attribute value, attribute value starting with or containing a value, and more.

Uploaded by

Mai Quang Vinh (K17CT)
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Dark code

 HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP BOOTSTRAP HOW TO W3.CSS C C++ C# REACT R   

CSS Lists
Tutorials  References  Exercises  Bootcamp Upgrade Get Certified Create Website Sign Up Log in

CSS Tables
CSS Display
CSS Max-width
CSS Position
CSS Z-index
CSS Overflow
CSS Float
CSS Inline-block
CSS Align
CSS Attribute Selectors
CSS Combinators
CSS Pseudo-class
❮ Previous Next ❯
CSS Pseudo-element
CSS Opacity
CSS Navigation Bar
Style HTML Elements With Specific Attributes
CSS Dropdowns
CSS Image Gallery It is possible to style HTML elements that have specific attributes or attribute values.
CSS Image Sprites
COLOR PICKER
CSS Attr Selectors
CSS Forms
CSS Counters
CSS [attribute] Selector
CSS Website Layout The [attribute] selector is used to select elements with a specified attribute.
CSS Units
CSS Specificity The following example selects all <a> elements with a target attribute: 
CSS !important
CSS Math Functions
Example Get certified
by completing
a[target] {
background-color: yellow;
a CSS
} course today!

school
Try it Yourself » w3 s

3
CE

02
TI 2

R
FI .
ED

CSS [attribute="value"] Selector


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

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;
}

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, whose value can be exactly the
specified value, or the specified value followed by a hyphen (-).

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 with the specified attribute, whose value starts with the specified
value.

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

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

Example

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

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
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:
Set the background color to "red" for <a> elements that have a target attribute.

<style>
{
background-color: red;
}
</style>

<body>
<a href="https://w3schools.com">w3schools.com</a>
<a href="http://disney.com" target="_blank">Disney.com</a>
<a href="http://wikipedia.org" target="_top">wikipedia.org</a>
</body>

Submit Answer »

Start the Exercise

All CSS Attribute Selectors

Selector Example Example description

[attribute] [target] Selects all elements with a target attribute

[attribute=value] [target="_blank"] Selects all elements with target="_blank"

[attribute~=value] [title~="flower"] Selects all elements with a title attribute containing the word "flower"

[attribute|=value] [lang|="en"] Selects all elements with a lang attribute value starting with "en"

[attribute^=value] a[href^="https"] Selects every <a> element whose href attribute value begins with "https"

[attribute$=value] a[href$=".pdf"] Selects every <a> element whose href attribute value ends with ".pdf"

[attribute*=value] a[href*="w3schools"] Selects every <a> element whose href attribute value contains the
substring "w3schools"

❮ Previous Log in to track progress Next ❯

Report Error Spaces Upgrade Newsletter Get Certified

Top Tutorials Top References Top Examples Get Certified


HTML Tutorial HTML Reference HTML Examples HTML Certificate
CSS Tutorial CSS Reference CSS Examples CSS Certificate
JavaScript Tutorial JavaScript Reference JavaScript Examples JavaScript Certificate
How To Tutorial SQL Reference How To Examples Front End Certificate
SQL Tutorial Python Reference SQL Examples SQL Certificate
Python Tutorial W3.CSS Reference Python Examples Python Certificate
W3.CSS Tutorial Bootstrap Reference W3.CSS Examples PHP Certificate
Bootstrap Tutorial PHP Reference Bootstrap Examples jQuery Certificate
PHP Tutorial HTML Colors PHP Examples Java Certificate
Java Tutorial Java Reference Java Examples C++ Certificate
C++ Tutorial Angular Reference XML Examples C# Certificate
jQuery Tutorial jQuery Reference jQuery Examples XML Certificate

FORUM | ABOUT

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we
cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2023 by Refsnes Data. All Rights Reserved.


W3Schools is Powered by W3.CSS.

You might also like