Is there a css \'AND\' command

[onlykingjoe]

Hey guys,

This has always been a little frustration I have with CSS, but also it’s the sort of idea that I think could potentially exist already.

So in it’s most basic form, let’s say I have a popup with plenty of different h tags inside it. I want to make all the text black.. my current code would be this:

#popup h1, #popup h2, #popup h3, #popup p {
color: black !important;
}

What I would like to do is something like this

#popup h1&h2&h3&p {
color:black!important;
}

Obviously that is in basic form, when i write a super long selector followed by a different h tag it becomes more of a frustration…

Does something like that exist…?

[vulkanus]

Hi,

Maybe target the selector:

#popup > h1, h2, h3, #popup > p

Have you got an codepen to check?

[Paulie_D]

Does something like that exist…?

No, it does not….although CSS Level 4 has :is which will do most of what you want

https://developer.mozilla.org/en-US/docs/Web/CSS/:is

[Senff]

What I would like to do is something like this

popup h1&h2&h3&p {

color:black!important;
}

Aside from the fact that I would discourage the use of !important, you might want to look into Sass or LESS, where you can use something like this, by using this format:

#popup {
   h1,h2,h3,p {
      color: black;
   }
}

[onlykingjoe]

I can’t seem to mark as good answer, nor quote you, so hopefully, you get notified Vulkanus.

I think all the answers are correct here… the LESS/SASS answer seems like it would also be correct in most cases, although for whatever reason it isn’t working in my scenario. But I will try that again in future. It’s probably because I am writing it inside the CSS section of a themes options.

major edit: I deleted most of what i wrote as I just noticed the selector isnt working either. So this code for example:

#popup > h2, h3, h5, a, p {
color: red;
}

Is selecting all h3, h5, a and p on the page – not just what is under #popup. Which does make sense – I do understand why that wouldn’t be working, but am I just writing the code wrong? Or perhaps this method is just not going to work.

Which would put me back to the drawing board. Although I am sure i could get the LESS/SASS method to work somehow. I manage to get media queries to work within the CSS section of the theme options, which is the same concept.

[Author]

Posts