Grow your CSS skills. Land your dream job.

CSS Hierarchy Confusion

  • # January 7, 2011 at 4:28 pm

    AHH! I keep thinking I’m understanding this but then I get stuck again. Sorry I’m going to have to describe the problem and not use proper terminology.

    Okay, so if I have an overarching style in wordpress, like “.entry img” that applies to any image within the “entry” class, but I want to make an exception for en entire page’s images (or do them individually if need be), how can I override the broad styling to make an exception? What’s the best way? I’ve got 5px padding right now and on one page I want it to be 1px.

    Sorry for such a basic one, and that I don’t know the terminology well enough to search for a previous forum post.

    # January 7, 2011 at 4:35 pm

    you can do this by giving each page a body class. This way for your exception, you can do something like..


    body.contact .entryimg {
    float: right;
    }
    # January 7, 2011 at 4:38 pm

    Christopher, do you mean just putting

    CONTENT

    within the post? Or are you talking about some modification to the existing css structure of my premium theme?

    # January 7, 2011 at 6:28 pm

    Say for example the style in question is a border. You have it set up something like this:

    .entry img {
    border:1px solid #F00
    }

    Now, if on a specific page you dont want the images in .entry to have a border then what you would do is add a class or id to the body tag at the top of the page. For example, go from:

    to:

    “about” could be whatever you want. Name it something relative to the page. Anyway. Back in the css you add:

    .entry img {
    border:1px solid #F00
    }

    #about .entry img {
    border:none;
    }

    That way, on the page with the id of “about” (or whatever you want to call it), the images inside .entry would have no border.

    # January 7, 2011 at 7:51 pm

    Exactly what Noah restated in detail is what I was referring to.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

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