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

Home Forums CSS Apply class to parent if child div contains class

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 30 total)
  • Author
  • #39789

    Is there any way that anyone knows of to pull this off:

    I have:

    What I want is to change the background of body to blue IF the div inside it has a class of blue. Same principle if it’s red, green, yellow, etc.

    Does anyone know of a way to accomplish that?

    Kitty Giraudel

    No way in CSS. We can’t target a parent with pure CSS yet.


    Is there a way with javascript or jquery?


    I’m doing this in a WordPress Theme if that makes a difference…


    No problem with jQuery. Would look something like this:

    if( $(‘#target’).hasClass(‘blue’) ) {

    Then in your CSS you would have your styles for `.blue` and `.yellow`.


    I have got to be doing something wrong. Here’s what I have:

    In Header.php inside the head tag I put:

    In my page.php, I have:


    well – apparently I can’t figure out how to do code blocks in the new forum either… one of those days – I have my if statement wrapped in script tags, and it removed them.


    That didn’t work either… hmmm…


    No need for periods. The jQuery docs say they aren’t needed.

    Make sure you are calling the jQuery library properly. I think that is likely your issue.


    P.S.: In other exciting news, that was my first CodePen! Yay.


    Also, it’s generally best practice to make sure you IDs and classes are lowercase. There is *some* preference to using camelCase out there, but I think the industry standard is lowercase with hyphens.

    So it your example:

    `#ContentRow` would become `#content-row` and `.Blue` would be `.blue`, etc.

    You don’t need to add periods when using `.hasClass()`. It also doesn’t play very nicely with multiple class names, they have to be in the proper order. So if you do `.hasClass(‘first second’)` but the element on the page is actually `class=”second first”` then hasClass() will return `false`.

    Here’s an example for you:


    Having said all of that, @theacefes is probably correct – you might be trying use jQuery before the library is included. You might also want to wrap your code in something like this:

    $(document).ready(function() {
    // your code here


    I work for a company that uses .NET so we’re all about Camel Case. I started off using underscores though.

    It’s from a while ago, but still interesting.


    camelCase certainly has its place! I think it’s all about what language you are using.

    JS/PHP – camelCase
    HTML/CSS – hyphens / underscores


    Well for us it’s about maintaining a consistent standard across the board I think. On a personal level, whatever makes one comfortable I think. :)

    Taufik Nurrohman
    $(document).ready(function() {
    $('div').each(function() {
    var foo = this.className; // Get the element class...
    if ($(this).hasClass(foo)) {
Viewing 15 posts - 1 through 15 (of 30 total)
  • The forum ‘CSS’ is closed to new topics and replies.