Styjun

Set theory with antielements?

What is the question mark?

100 Years of GCHQ - A quick afternoon puzzle!

Typesetting "hollow slash"

Quick destruction of a helium filled airship?

Adding things to bunches of things vs multiplication

Can anybody tell me who this Pokemon is?

Scam? Phone call from "Department of Social Security" asking me to call back

Why does auto deduce this variable as double and not float?

Has the speed of light ever been measured in vacuum?

Can I use my OWN published papers' images in my thesis without Copyright infringment

What are these panels underneath the wing root of a A380?

Doesn't the speed of light limit imply the same electron can be annihilated twice?

Why does Japan use the same type of AC power outlet as the US?

What would cause a nuclear power plant to break down after 2000 years, but not sooner?

Insert or push_back to end of a std::vector?

How do I ask for 2-3 days per week remote work in a job interview?

6502: is BCD *fundamentally* the same performance as non-BCD?

What are some tips and tricks for finding the cheapest flight when luggage and other fees are not revealed until far into the booking process?

Unconventional examples of mathematical modelling

Would molten tin solidify and coat an organic horn?

What is the spellcasting ability of a Barbarian Totem Warrior?

How do ultra-stable oscillators for spacecraft work?

Duplicate and slide edge (rip from boundary)

What is the equivalent of the '.' CSS selector for any attribute?

What are valid values for the id attribute in HTML?Set cellpadding and cellspacing in CSS?How can I know which radio button is selected via jQuery?Is there a CSS parent selector?Is there a “previous sibling” selector?Change an HTML5 input's placeholder color with CSSCSS selector for first element with classHow to create an HTML button that acts like a link?How can I set the default value for an HTML <select> element?Can I write a CSS selector selecting elements NOT having a certain class?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

2

I'd like to select things similarly to how classes are selected (but I would like to use other attributes). In the same way that class='item-button item-button-selected' can be selected with both .item-button and .item-button-selected.

html css-selectors

share|improve this question

edited Mar 28 at 3:51

BoltClock♦

546k133133 gold badges12001200 silver badges12271227 bronze badges

asked Mar 27 at 12:33

faissaloofaissaloo

50544 silver badges1717 bronze badges

add a comment | 

2

I'd like to select things similarly to how classes are selected (but I would like to use other attributes). In the same way that class='item-button item-button-selected' can be selected with both .item-button and .item-button-selected.

html css-selectors

share|improve this question

edited Mar 28 at 3:51

BoltClock♦

546k133133 gold badges12001200 silver badges12271227 bronze badges

asked Mar 27 at 12:33

faissaloofaissaloo

50544 silver badges1717 bronze badges

add a comment | 

I'd like to select things similarly to how classes are selected (but I would like to use other attributes). In the same way that class='item-button item-button-selected' can be selected with both .item-button and .item-button-selected.

html css-selectors

share|improve this question

edited Mar 28 at 3:51

BoltClock♦

546k133133 gold badges12001200 silver badges12271227 bronze badges

asked Mar 27 at 12:33

faissaloofaissaloo

50544 silver badges1717 bronze badges

share|improve this question

edited Mar 28 at 3:51

BoltClock♦

546k133133 gold badges12001200 silver badges12271227 bronze badges

asked Mar 27 at 12:33

faissaloofaissaloo

50544 silver badges1717 bronze badges

share|improve this question

edited Mar 28 at 3:51

BoltClock♦

546k133133 gold badges12001200 silver badges12271227 bronze badges

asked Mar 27 at 12:33

faissaloofaissaloo

50544 silver badges1717 bronze badges

edited Mar 28 at 3:51

BoltClock♦

546k133133 gold badges12001200 silver badges12271227 bronze badges

edited Mar 28 at 3:51

BoltClock♦

546k133133 gold badges12001200 silver badges12271227 bronze badges

asked Mar 27 at 12:33

faissaloofaissaloo

50544 silver badges1717 bronze badges

asked Mar 27 at 12:33

faissaloofaissaloo

50544 silver badges1717 bronze badges

1 Answer
1

active

oldest

votes

2

The equivalent of an HTML class selector for any attribute is [attribute~=value], matching one of a set of space-separated values:

[data-foo~="a"] 
 color: red;


[data-foo~="a"][data-foo~="b"] 
 color: blue;

<p data-foo="a">a
<p data-foo="a b">a b
<p data-foo="b">b

In case you're worried about specificity (if this is a non-CSS use case, you don't need to worry), attribute selectors and class selectors are equally specific.

share|improve this answer

answered Mar 28 at 3:40

BoltClock♦BoltClock

546k133133 gold badges12001200 silver badges12271227 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55377317%2fwhat-is-the-equivalent-of-the-css-selector-for-any-attribute%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

The equivalent of an HTML class selector for any attribute is [attribute~=value], matching one of a set of space-separated values:

[data-foo~="a"] 
 color: red;


[data-foo~="a"][data-foo~="b"] 
 color: blue;

<p data-foo="a">a
<p data-foo="a b">a b
<p data-foo="b">b

In case you're worried about specificity (if this is a non-CSS use case, you don't need to worry), attribute selectors and class selectors are equally specific.

share|improve this answer

answered Mar 28 at 3:40

BoltClock♦BoltClock

546k133133 gold badges12001200 silver badges12271227 bronze badges

add a comment | 

2

The equivalent of an HTML class selector for any attribute is [attribute~=value], matching one of a set of space-separated values:

[data-foo~="a"] 
 color: red;


[data-foo~="a"][data-foo~="b"] 
 color: blue;

<p data-foo="a">a
<p data-foo="a b">a b
<p data-foo="b">b

In case you're worried about specificity (if this is a non-CSS use case, you don't need to worry), attribute selectors and class selectors are equally specific.

share|improve this answer

answered Mar 28 at 3:40

BoltClock♦BoltClock

546k133133 gold badges12001200 silver badges12271227 bronze badges

add a comment | 

The equivalent of an HTML class selector for any attribute is [attribute~=value], matching one of a set of space-separated values:

[data-foo~="a"] 
 color: red;


[data-foo~="a"][data-foo~="b"] 
 color: blue;

<p data-foo="a">a
<p data-foo="a b">a b
<p data-foo="b">b

In case you're worried about specificity (if this is a non-CSS use case, you don't need to worry), attribute selectors and class selectors are equally specific.

share|improve this answer

answered Mar 28 at 3:40

BoltClock♦BoltClock

546k133133 gold badges12001200 silver badges12271227 bronze badges

[data-foo~="a"] 
 color: red;


[data-foo~="a"][data-foo~="b"] 
 color: blue;

<p data-foo="a">a
<p data-foo="a b">a b
<p data-foo="b">b

[data-foo~="a"] 
 color: red;


[data-foo~="a"][data-foo~="b"] 
 color: blue;

<p data-foo="a">a
<p data-foo="a b">a b
<p data-foo="b">b

[data-foo~="a"] 
 color: red;


[data-foo~="a"][data-foo~="b"] 
 color: blue;

<p data-foo="a">a
<p data-foo="a b">a b
<p data-foo="b">b

share|improve this answer

answered Mar 28 at 3:40

BoltClock♦BoltClock

546k133133 gold badges12001200 silver badges12271227 bronze badges

answered Mar 28 at 3:40

BoltClock♦BoltClock

546k133133 gold badges12001200 silver badges12271227 bronze badges

answered Mar 28 at 3:40

BoltClock♦BoltClock

546k133133 gold badges12001200 silver badges12271227 bronze badges