Skip to main content

Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #296309
    onlykingjoe
    Participant

    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…?

    #296312
    vulkanus
    Participant

    Hi,

    Maybe target the selector:

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

    Have you got an codepen to check?

    #296318
    Paulie_D
    Moderator

    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

    #296319
    Senff
    Participant

    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;
       }
    }
    
    #296322
    onlykingjoe
    Participant

    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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.