SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: CSS:not?

  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS:not?

    Is there a way to exclude h1s which have class="postttitle" from the ruleset below?

    Code:
    .entry h1, .entry h2,.entry h3,.entry h4,.entry h5,.entry h6 {font-size:100%;margin:0 -.5em 0 0;padding:0;display:inline;}
    Example:

    <article class="entry">
    <header>
    <h1 class="posttitle">Don't include this h1 in the ruleset</h1>
    </header>
    <p>Content goes here</p>
    <h1>Do include this h1 in the ruleset</h1>
    <p>More Content goes here</p>
    <h2>Do include this h1 in the ruleset</h2>
    <p>More Content goes here</p>
    </article>
    Last edited by spikeZ; Mar 15, 2012 at 10:20. Reason: as requested

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, you can do something like this .
    Code:
    h1:not(.posttitle)
    It selects all <h1> elements, and inside the parenthesis, it checks for those with .posttitle. Those WITH that class, will not get the CSS.

    Hope thath elps (I hope you do realize it isn't fully supported everywhere )
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan! That's exactly what I was looking for.

    Moderator: Please edit my post to change ".entry h" to ".entry h1"

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Scott Blanchard View Post
    Thanks Ryan! That's exactly what I was looking for.

    Moderator: Please edit my post to change ".entry h" to ".entry h1"
    Glad I was able to help you out . I reported your post to the mods so they should change it very soon. I n oticed that originally but I knew where you were going with it .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh well...<shrugs>

    The appearance of the :not() filter appears to completely trip up IE < 8 from applying any of the rules. I don't expect them to recognize the not(), but I was also :not expecting its appearance to invalidate the rules it understands.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Scott Blanchard View Post
    Oh well...<shrugs>

    The appearance of the :not() filter appears to completely trip up IE < 8 from applying any of the rules. I don't expect them to recognize the not(), but I was also :not expecting its appearance to invalidate the rules it understands.
    If a browser does not understand the pseudo element/class then it is required to drop out of the rule block completely. If you have comma separated rules then they will all be lost to the browser. You should therefore keep your advanced selectors separate from normal rules. Browsers do vary on how they handle this though.

  7. #7
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,343
    Mentioned
    192 Post(s)
    Tagged
    4 Thread(s)
    What's wrong with this?
    Code:
    h1.posttitle {font-size:inherit;margin:inherit;padding:inherit;display:inherit;}
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  8. #8
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    If a browser does not understand the pseudo element/class then it is required to drop out of the rule block completely. If you have comma separated rules then they will all be lost to the browser. You should therefore keep your advanced selectors separate from normal rules. Browsers do vary on how they handle this though.
    Ah, very good to know. That helps!

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ParkinT
    h1.posttitle {font-size:inherit;margin:inherit;padding:inherit;display:inherit;}
    That code doesn't say anything. Inheritance is already part of CSS. Well, except in IE, where things like fonts and colours I don't think understand "inherit".

    "inherit" doesn't override new styles coming along who also hit h1.posttitle anyway. I'm not even sure if "inherit" is a valid value for some of those properties.

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I don't believe the padding:inherit is a valid value. Though the others I do believe it is valid .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    My question would be what values do you NOT want set on .posttitle, or what values would be different; as rather than screwing around with fancy selectors I'd just override the values back to what they are supposed to be.

    Sounds like your CSS code order and/or your element specificity is wrong... thought that too can go hand-in-hand with HTML 5's new nonsensical structural rules leading to broken/nonsensical use of heading tags and extra tags for nothing -- making inheritance and element targeting a total mess.

    Which is why before worrying about that I'd ditch the HTML 5 garbage...

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    I don't believe the padding:inherit is a valid value. Though the others I do believe it is valid .
    You can apply inherit to any property. Only some properties automatically inherit though and you can find out which in the reference (ie6 and 7 don't understand the value inherit at all except for visibility and direction).

  13. #13
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by w3c
    body {
    color: black !important;
    background: white !important;
    }

    * {
    color: inherit !important;
    background: transparent !important;
    }
    *shudder*


    I figured I hadn't seen "inherit" in all the "Value: <length> | <percentage> | auto | inherit" lines, maybe it was the more recent stuff like linear-gradient...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •