Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Selector "(A or B) and C"?

This should be simple, but I'm having trouble finding the search terms for it.
Let's say I have this:

<div class="a c">Foo</div>
<div class="b c">Bar</div>

In CSS, how can I create a selector that matches something that matches "(.a or .b) and .c"?

I know I could do this:

.a.c,.b.c {
  /* CSS stuff */
}

But, assuming I'm going to have to do this sort of logic a lot, with a variety of logical combinations, is there a better syntax?

like image 896
Josh Avatar asked Oct 16 '22 07:10

Josh


People also ask

What is CSS selector A?

A type selector selects all HTML elements that have a given node name. For example, “a” would select all <a> elements and apply the CSS property values to them.

What are the 3 CSS selectors?

Simple selectors (select elements based on name, id, class) Combinator selectors (select elements based on a specific relationship between them) Pseudo-class selectors (select elements based on a certain state)

What are the 4 CSS selectors?

A type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class is a simple selector.


1 Answers

is there a better syntax?

No. CSS' or operator (,) does not permit groupings. It's essentially the lowest-precedence logical operator in selectors, so you must use .a.c,.b.c.

like image 184
Matt Ball Avatar answered Oct 25 '22 08:10

Matt Ball