Grow your CSS skills. Land your dream job.

A little help with selectors

  • # April 5, 2013 at 4:17 am

    http://codepen.io/TannerCampbell/pen/wjzdL

    Thinking I was being clever, I did this:

    #column-left p {
    font-size: 1.5em;
    line-height: 24px;
    text-align: left;
    padding: ;
    }

    Making all the p tags in the #column-left div adhere to this styling. Well, whoops, because I have a p tag, classed as “comments”, that exists in #column-left and I need to speak to it specifically to adjust its size.

    Anyone know a work around? I can fix it by moving some things around but I was hoping someone might know a clever piece of CSS that would allow me void the other styling.

    If you want to see the site instead of the code pen: http://tannercampbell.net/writerssquare

    any input would be appreciated. Thanks, all.

    Best,
    Tanner

    # April 5, 2013 at 4:31 am

    Target `#column-left .comments`?

    # April 5, 2013 at 4:05 pm

    @ChrisBurton you bad ass so and so. I don’t know why I didn’t try that. I was doing this

    #column-left p.comments {
    font-size: 2em;
    }

    instead of what you suggested. Just needed to drop the p! Guess I was a little tired last night. Nice. Thanks!

    # April 5, 2013 at 4:09 pm

    Actually that’s weird. That should have worked for you.

    `p.comments` is the same same as `

    `

    # April 5, 2013 at 4:18 pm

    but if there’s css that says

    #column-left p {
    whatever: whatever;
    }

    Doesn’t it make total sense that I can’t do

    #column-left p.comments {
    whatever: whatever;
    }

    on account of a higher level style being applied to all the p tags in that div?

    # April 5, 2013 at 4:29 pm

    That depends if you’re using `!important` and if `#column-left p` is below `#column-left p.comments` in your stylesheet, I believe.

    # April 5, 2013 at 4:30 pm
    #column-left p

    comes before

    #column-left p.comments

    Thanks for your help @ChrisBurton

    # April 5, 2013 at 4:39 pm

    The order doesn’t matter

    #column-left .comment { } (or p.comment)

    has a higher specificity than

    #column-left p { }

    and will win out over the general level p

    # April 5, 2013 at 4:45 pm

    Thanks @wolfcry911

    # April 5, 2013 at 9:22 pm

    I imagine @Wolfcry911 lives in space, is a genius, knows everything about everything, and only answers our questions because he’s bored.

    # April 5, 2013 at 9:55 pm

    LOL – thanks tanner, you made my day!

    And just for the record (for those that care), I never claim to know everything about anything ;)

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

You must be logged in to reply to this topic.

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