How to write a css-selection to select an element with ([myattr=a] || [myattr=b]) && [secondattr=s] in a one-liner?

Question

At the end of the section 6.3.1. in https://www.w3.org/TR/css3-selectors/#attribute-representation it's said

The following selectors represent a DIALOGUE element whenever it has one of two different values for an attribute character:

DIALOGUE[character=romeo]
DIALOGUE[character=juliet]

I don't get it working, simply. Is it possible in a one-liner at all?

Edit:
to select:

<div class="parentclass"><div class="another" myattr="a" secondattr="s"></div></div>
<div class="parentclass"><div class="another" myattr="b" secondattr="s"></div></div>

but not:

<div class="parentclass"><div class="another" myattr="a" secondattr=""></div></div>
<div class="parentclass"><div class="another" myattr="b" secondattr=""></div></div>
<div class="parentclass"><div class="another" myattr="z" secondattr="s"></div></div>

In a one-liner prefeably, because parentclassand another are actually much longer and I need to use this on 5 different sorts of secondattr, from s to w.

@TemaniAfif If it's a div with class ch `div.ch` and I want it only to be selected when it's one child of `div.ca`, how to add this in front of the beforementioned selection? `div.ca div.ch [myattr=a][secondattr=s] [myattr=b][secondattr=s]` ? — John, Jan 12 '18 at 08:43
you are almost, simply remove the space after div.ch and need `,` between both selector — Temani Afif, Jan 12 '18 at 08:49
What do those class names have to do with those attributes? Maybe it'd be easier if you just showed us the actual markup instead of trying to use sample names to illustrate your problem. — BoltClock, Jan 12 '18 at 08:51
@john i added an answer for better explanation as the comment wasn't really good — Temani Afif, Jan 12 '18 at 08:53

Mr Lister · Accepted Answer · 2018-01-12T09:18:04.290

2

To select an element with ([myattr=a] || [myattr=b]) && [secondattr=s] in a one-liner, the only possible syntax is

element[myattr='a'][secondattr='s'], element[myattr='b'][secondattr='s'] {..}

To address your later edit, the selector would be

div.parentclass div.another[myattr='a'][secondattr='s'],
div.parentclass div.another[myattr='b'][secondattr='s'] {..}

For example,

div {
  height: 1em; border: 1px solid;
}

div.parentclass div.another[myattr='a'][secondattr='s'],
div.parentclass div.another[myattr='b'][secondattr='s'] {
  background: green;
}

to select:

<div class="parentclass"><div class="another" myattr="a" secondattr="s"></div></div>
<div class="parentclass"><div class="another" myattr="b" secondattr="s"></div></div>

but not:

<div class="parentclass"><div class="another" myattr="a" secondattr=""></div></div>
<div class="parentclass"><div class="another" myattr="b" secondattr=""></div></div>
<div class="parentclass"><div class="another" myattr="z" secondattr="s"></div></div>

Although I must say that myattr and secondattr are not allowed as attribute names, so using this in an actual production environment is not recommended. Use data-... attributes instead.

Note: if you think this is a bit long, and you need to target even more values for the attributes, you can use a preprocessor like SCSS, which allows you to write

div.parentclass div.another[secondattr='s'] {
  &[myattr='a'], &[myattr='b'] {..}
}

so you don't have to repeat yourself.

edited Jan 12 '18 at 09:18

answered Jan 12 '18 at 08:47

Mr Lister

45,515
15
108
150

Alright, so I have to repeat the `div.parentclass div.another` part sadly. Basically I suspected to have an error in the attribute selecting part, that's why I at first only posted that part. Though I still wonder what's meant by the W3.org paragraphed I cited then. – John Jan 12 '18 at 09:05
1

@John To not have to repeat yourself, you can use SCSS or similar. See edit. – Mr Lister Jan 12 '18 at 09:10
1

@John The W3.org paragraph simply means that you can target any specific value of an attribute. So the two lines should be read as `DIALOGUE[character=romeo] {..}` and `DIALOGUE[character=juliet] {..}`, respectively. They are not two parts of a compound selector. – Mr Lister Jan 12 '18 at 09:11
Is SCSS some W3 standard? I can'T even find it anywhere really, except for one stackoverflow answer. https://stackoverflow.com/a/5654471/4550791 - Else that would be more or less I'm looking for. Just if there is a manual available for SCSS :) – John Jan 12 '18 at 09:17
Great! So the cited paragraph of the W3 page about `DIALOGUE[character=romeo] {..}` and `DIALOGUE[character=juliet] {..}` is clear now, too. – John Jan 12 '18 at 09:19
SCSS is not a W3C standard, but it's not that difficult to find. Are you sure you didn't have a typo? – Mr Lister Jan 12 '18 at 09:24
If it's not a W3C standard, I first have to check where it is supported. I searched for quite a few keywords, but except once always with `w3.org` as one keyword. I will take a look, if I could find a manual, and if it runs in enough browsers. Else I have to stick with the repeating of the selectors. Ty all! – John Jan 12 '18 at 09:28
@John: SCSS (really, Sass) is a tool that you, as the author, can use to make writing CSS easier. – BoltClock Jan 12 '18 at 10:50

Temani Afif · Answer 2 · 2018-01-12T09:03:59.390

As I commented above here is how you can do it:

/* Select element where (a=='1' || a=='2') && b==2 
   which also is  (a==1 && b==2) || (a==2 && b==2)
*/

.container div[a='1'][b='2'],  /*(a==1 && b==2)*/
.container div[a='2'][b='2']   /*(a==2 && b==2)*/
{
  color:red;
}

<div class="container">
  <div a='1' b='2'>a</div>
  <div a='2' b='2'>b</div>
  <div a='3' b='3'>c</div>
  <div a='1' b='2'>d</div>
  <div a='4' b='3'>e</div>
</div>

UPDATE

The same logic with your edited code:

.parentclass .another[myattr=a][secondattr=s],.parentclass .another[myattr=b][secondattr=s] {
  color:red;
}

<div class="parentclass">
  <div class="another" myattr="a" secondattr="s">a</div>
</div>
<div class="parentclass">
  <div class="another" myattr="b" secondattr="s">b</div>
</div>
<div class="parentclass">
  <div class="another" myattr="a" secondattr="">c</div>
</div>
<div class="parentclass">
  <div class="another" myattr="b" secondattr="">d</div>
</div>
<div class="parentclass">
  <div class="another" myattr="z" secondattr="s">e</div>
</div>

I'm going to accept Mr. Lister's answer. (But I'm just browsing through some of your other answers on other questions, and upvote there, too. I like the css-coloured circle!) — John, Jan 12 '18 at 09:30
@John yes sure no problem, you may accept the suitable answer :) but don't upvote a lot of answer as it may be seen as spam by the system :) — Temani Afif, Jan 12 '18 at 09:32

How to write a css-selection to select an element with ([myattr=a] || [myattr=b]) && [secondattr=s] in a one-liner?

2 Answers2