CODEWITHSUNDEEP
htmlcss
Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 19967

CSS Attribute selector begins with without an attribute name

I know we can select attributes that begin with "foo" given an attribute name.

div[class^="foo"]

Can this be done without an attribute name?

div[^="foo"]

Note:

I am aware we can do this:

div[foo] {
  color: blue;
}

But in my case, I am trying to select something that has a variable attribute name:

foo-1 foo-2 etc.

div[^=foo] {
  color: red;
}

div[class^="foo"] {
  color: red;
}
<div foo>This text is not red</div>

<div class="foo">This text is red</div>

Upvotes: 2

Views: 306

Answers (1)

Tyler Roper
Tyler Roper

Reputation: 21672

Can this be done without an attribute name?

While the answer isn't too pretty, the short of it is no, it can't - not in the way you're suggesting.

References:

W3 Attribute Selectors Specification

[att] Represents an element with the att attribute, whatever the value of the attribute.

[att=val] Represents an element with the att attribute whose value is exactly "val".

[att~=val] Represents an element with the att attribute whose value is a whitespace-separated list of words, one of which is exactly "val". If "val" contains whitespace, it will never represent anything (since the words are separated by spaces). Also if "val" is the empty string, it will never represent anything.

[att|=val] Represents an element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-" (U+002D). This is primarily intended to allow language subcode matches (e.g., the hreflang attribute on the a element in HTML) as described in BCP 47 ([BCP47]) or its successor. For lang (or xml:lang) language subcode matching, please see the :lang pseudo-class.

W3 General Selectors Specification

The following table summarizes the Selector syntax:

...

[Provides documentation of all valid selectors, omitting any mention of wildcard attribute selectors]

...

Upvotes: 3

Related Questions