13
CSS :content and :section pseudo element selectors
5 Comments · Posted by Dave Smith in CSS
I believe there is a useful and yet missing CSS3 selector. I’ll explain with a rough example:
<section> <h1 or h>My section heading</h1 or h> <p>Para</p> <p>Para</p> <p>Para</p> <p>Para</p> </section>
Given the above, to style the section content so that it is indented by 20px, but leave the heading with no margin, could be done with:
.section > *:not(h1) {margin-left:20px;}
but what if the following was available:
h1:content {margin-left:20px;}
A pseudo element wraps the content, based on heading scope, and is then styled.
and
h1:section { }
A pseudo element wraps the heading and content, based on heading scope, and is then styled.
Apart from being easy to read, one advantage could be in backwards compatibility with old documents (without section elements) that they could be styled just as easily as new ones. Plus it just feels right to me.
5 comments
Leave a Reply
<< Google Analytics Asynchronous Snippet for the Head Element
Bob · March 13, 2009 at 3:44 pm
Boo x
Admin comment by Dave Smith · March 13, 2009 at 3:53 pm
Thanks bro, love ya
Matthew Hillman · June 2, 2009 at 9:24 am
I havent seen the tag used before what is the purpose of this over the normal heading tag. Forgive me if its a stupid question I’m a bit out of touch with CSS3.
Matthew Hillman · June 2, 2009 at 9:26 am
‹h1 or h› I was on about.
Admin comment by Dave Smith · June 2, 2009 at 10:38 am
Your right, there is no such tag, I just meant h1, h2, h3, h4, h5, h6 or h.