CSS:not?

HTML & CSS
1

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

.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>

2

Hi, you can do something like this :).

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 :))

3

Thanks Ryan! That’s exactly what I was looking for.

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

4

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 :).

5

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

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

What’s wrong with this?


h1.posttitle {font-size:inherit;margin:inherit;padding:inherit;display:inherit;}
8

Ah, very good to know. That helps!

9

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

I don’t believe the padding:inherit is a valid value. Though the others I do believe it is valid :).

11

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

You can apply inherit to any property. Only some properties automatically inherit though and you can find out which [URL=“http://reference.sitepoint.com/css/inheritvalue”]in the reference (ie6 and 7 don’t understand the value inherit at all except for visibility and direction).

13

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…