Grow your CSS skills. Land your dream job.

Apply class to parent if child div contains class

  • # September 11, 2012 at 6:12 pm

    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?

    # September 11, 2012 at 6:13 pm

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

    # September 11, 2012 at 6:15 pm

    Is there a way with javascript or jquery?

    # September 11, 2012 at 6:16 pm

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

    # September 11, 2012 at 6:19 pm

    No problem with jQuery. Would look something like this:

    if( $(‘#target’).hasClass(‘blue’) ) {
    $(document.body).addClass(‘yellow’);
    }

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

    # September 11, 2012 at 6:26 pm

    Yeah – I wish there was a parent selector in CSS but sadly not – Chris did an article on it – http://css-tricks.com/parent-selectors-in-css/

    Regarding your problem – TheDoc is pretty much on the money that JQuery has your back.

    I just did something for an accordion that adds a class to the parent, relevant part;

    $(this).parent().addClass("active");

    You could do something like that.

    # September 11, 2012 at 6:30 pm

    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:

    # September 11, 2012 at 6:31 pm

    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.

    # September 11, 2012 at 6:53 pm

    I assume you need to add ‘.row .blue’ (make sure to use the periods!) rather than ‘row blue’ – that might be where the problem is coming from.

    # September 11, 2012 at 9:53 pm

    That didn’t work either… hmmm…

    # September 11, 2012 at 10:47 pm

    http://codepen.io/katbella5/pen/pxutd

    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.

    -Kat

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

    # September 12, 2012 at 12:54 am

    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: http://jsfiddle.net/e6kE3/

    # September 12, 2012 at 12:56 am

    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
    });

    # September 12, 2012 at 2:25 am

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

    http://css-tricks.com/poll-results-hyphens-underscores-or-camelcase/

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

    # September 12, 2012 at 2:35 am

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

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

Viewing 15 posts - 1 through 15 (of 32 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".