Css attributes and values

[attribute]

There are lots of ways you can select elements in CSS. The most basic selection is by tag name, like p < >. Almost anything more specific than a tag selector uses attributes — class and ID both select on those attributes on HTML elements. But class and ID aren’t the only attributes developers can select. We can use any of an element’s attributes as selectors. Attribute selection has a special syntax. Here’s an example:

That’s an exact match selector that will only select links with the exact href attribute value of “https://css-tricks.com”.

The Seven Different Types

Attribute selectors are case-sensitive by default (see case-insensitive matching below), and are written inside brackets [] . There are seven different types of matches you can find with an attribute selector, and the syntax is different for each. Each of the more complex attribute selectors build on the syntax of the exact match selector — they all start with the attribute name and end with an equals sign followed by the attribute value(s), usually in quotes. What goes between the attribute name and equals sign is what makes the difference among the selectors.

[data-value] < /* Attribute exists */ >[data-value="foo"] < /* Attribute has this exact value */ >[data-value*="foo"] < /* Attribute value contains this value somewhere in it */ >[data-value~="foo"] < /* Attribute has this value in a space-separated list somewhere */ >[data-value^="foo"] < /* Attribute value starts with this */ >[data-value|="foo"] < /* Attribute value starts with this in a dash-separated list */ >[data-value$="foo"] < /* Attribute value ends with this */ >

Value contains: attribute value contains a term as the only value, a value in a list of values, or as part of another value. To use this selector, add an asterisk (*) before the equals sign. For example, img[alt*=»art»] will select images with the alt text “abstract art” and “athlete starting a new sport”, because the value “art” is in the word “starting”. Value is in a space-separated list: value is either the only attribute value, or is a whole value in a space-separated set of values. Unlike the “contains” selector, this selector will not look for the value as a word fragment. To use this selector, add a tilde (~) before the equals sign. For example, img[alt~=»art»] will select images with the alt text “abstract art” and “art show”, but not “athlete starting a new sport” (which the “contains” selector would select). Value starts with: attribute value starts with the selected term. To use this selector, add a caret (^) before the equals sign. Don’t forget, case-sensitivity matters. For example, img[alt^=”art”] will select images with the alt text “art show” and “artistic pattern”, but not an image with the alt text “Arthur Miller” because “Arthur” begins with a capital letter. Value is first in a dash-separated list: This selector is very similar to the “starts with” selector. Here, the selector matches a value that is either the only value or is the first in a dash-separated list of values. To use this selector, add a pipe character (|) before the equals sign. For example, li[data-years|=»1900″] will select list items with a data-years value of “1900-2000”, but not the list item with a data-years value of “1800-1900”. Value ends with: attribute value ends with the selected term. To use this selector, add a dollar sign ($) before the equals sign. For example, a[href$=»pdf»] selects every link that ends with .pdf.

A note about quotes: You can go without quotes around the value in some circumstances, but the rules for selecting without quotes are inconsistent cross-browser. Quotes always work, so if you stick to using them you can be sure your selector will work.

See the Pen Attribute Selectors by CSS-Tricks (@css-tricks) on CodePen. Fun fact: the values are treated as strings, so you don’t have to do any fancy escaping of characters to make them match, as you would if you used unusual characters in a class or ID selector.

Case-insensitive attribute selectors are part of the CSS Working Group’s Selectors Level 4 specification. As mentioned above, attribute value strings are by default case-sensitive, but can be changed to case-insensitive by adding i just before the closing bracket:

Case-insensitive matching could be really handy for targeting attributes holding unpredictable, human-written text. For example, suppose you were styling a speech bubble on a chat app and wanted to add a “waving hand” to any messages with the text “hello” in some form. You could do so with only CSS, using a case-insensitive matcher to catch all possible variations: See the Pen Case-insensitive CSS attribute matching by CSS-Tricks (@css-tricks) on CodePen.

div[attribute="value"] < /* style rules here */ >.module[attribute="value"] < /* style rules here */ >#header[attribute="value"] < /* style rules here */ >

Or even combine multiple attribute selectors. This example selects images with alt text that includes the word “person” as the only value or a value in a space separated list, and a src value that includes the value “lorem”:

Attribute Selectors in JavaScript and jQuery

Attribute selectors can be used in jQuery just like any other CSS selector. In JavaScript, you can use attribute selectors with document.querySelector() and document.querySelectorAll() . See the Pen Attribute Selectors in JS and jQuery by CSS-Tricks (@css-tricks) on CodePen.

Источник

CSS Attribute Selectors

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 elements with a target attribute:

Example

CSS [attribute=»value»] Selector

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

Example

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

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 >

Example

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

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

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

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

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

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 element whose href attribute value begins with «https»
[attribute$=value]	a[href$=».pdf»]	Selects every element whose href attribute value ends with «.pdf»
[attribute*=value]	a[href*=»w3schools»]	Selects every element whose href attribute value contains the substring «w3schools»

Источник

attr()

Note: The attr() function can be used with any CSS property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse.

The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in the stylesheet. It can also be used on pseudo-elements, in which case the value of the attribute on the pseudo-element’s originating element is returned.

Try it

Syntax

/* Simple usage */ attr(data-count); attr(title); /* With type */ attr(src url); attr(data-count number); attr(data-width px); /* With fallback */ attr(data-count number, 0); attr(src url, ""); attr(data-width px, inherit); attr(data-something, "default"); 

Values

The name of an attribute on the HTML element referenced in the CSS.

A keyword representing either the type of the attribute’s value, or its unit, as in HTML some attributes have implicit units. If the use of as a value for the given attribute is invalid, the attr() expression will be invalid too. If omitted, it defaults to string . The list of valid values are:

Default value: an empty string.

The attribute value is parsed as a hash (3- or 6-value hash) or a keyword. It must be a valid CSS value. Leading and trailing spaces are stripped.

Default value: currentcolor .

The attribute value is parsed as a string that is used inside a CSS url() function. Relative URL are resolved relatively to the original document, not relatively to the style sheet. Leading and trailing spaces are stripped.

Default value: the URL about:invalid that points to a non-existent document with a generic error condition.

Default value: 0 , or, if 0 is not a valid value for the property, the property’s minimum value.

Default value: 0 , or, if 0 is not a valid value for the property, the property’s minimum value.

Default value: 0 , or, if 0 is not a valid value for the property, the property’s minimum value.

em , ex , px , rem , vw , vh , vmin , vmax , mm , cm , in , pt , or pc Experimental

Default value: 0 , or, if 0 is not a valid value for the property, the property’s minimum value.

Default value: 0deg , or, if 0deg is not a valid value for the property, the property’s minimum value.

deg , grad , rad Experimental

Default value: 0deg , or, if 0deg is not a valid value for the property, the property’s minimum value.

Default value: 0s , or, if 0s is not a valid value for the property, the property’s minimum value.

Default value: 0s , or, if 0s is not a valid value for the property, the property’s minimum value.

Default value: 0Hz , or, if 0Hz is not a valid value for the property, the property’s minimum value.

Default value: 0Hz , or, if 0Hz is not a valid value for the property, the property’s minimum value.

Default value: 0% , or, if 0% is not a valid value for the property, the property’s minimum value.

The value to be used if the associated attribute is missing or contains an invalid value. If not set, CSS will use the default value defined for each .

Formal syntax

=
attr( ? , ? )

=
string |
url |
ident |
color |
number |
percentage |
length |
angle |
time |
frequency |
flex |

Источник