exploring css, inside w3c

hanfi — Sat, 05 Jan 2008 10:26:29 +0000

I discovered css some years ago. Since then i used it frequently for some of my websites, mainly to customize phpBB forums. The Greck Website is a nice small css-based html page.

For the Ghost-projekt I started to look a little bit deeper into css. So I went out and checked the World Wide Web Consortium WebSite. While playing around I found this blog entry about css, and got really impressed by those guys and what css can do.

Well, now here i am. Having a lot to play with and even more that I dont understand completly.

For sure, the most interesting part for me right now are the pseudo-elements and -classes. Looks fun to play with. So I tried this:


HTML

first child in this html.
forcing a line break for sake of example.
next child in this html.
forcing a line break for sake of example.


CSS
p:first-child { color: red;}
p:first-line {	color: blue;}

So far so good. You can see the example here.
Looks right? First Child is red, second black. and the first lines of both are blue. Well….
Lets review the css docu on w3c. In special check what type those selectors have.
:first-child is a attribute selector (classes are attributes)
:first-line is a element selector
so whats the precedence for those 2?
checking the relevant css docus we calculate these values:
p:first-child: a=0, b=0, c=1, d=1
p:first-line: a=0, b=0, c=0, d=2
now check the first the first

tag. Shouldn’t the first-child be more specific and therefore overwrite the first-line?
well, we can go and try force it even more.
lets change the firs-child style selector to
div p:first-child ...
this time we have a specific precedence of a=0, b=0, c=1, d=2
this clearly should outrule the first-line style.

Well, there is a way to explain this.
According to the css specification about the pseudo elements the UA creates a fictional tag sequence by inserting and its end tag into the tree. BUT the UA doesn’t (mustn’t ?) write this back into the real Document tree. Therefore, the p:first-child has a p:first-line inside thats not visible to the HTML/Javascript/etc.

Why is that worth a blog here?
Well, basicaly we can create a browser state where the DOM-Tree and the css tree are out of sync. This could be used to hide/display things not in the DOM-tree. I don’t found a way to abuse this so far…but its still interesting to know that css and DOM see different things.

PS: I am a complete newb in css. I have no idea if my explanation above is correct, nor i see a way to prove it. Any explanation/addition/references are highely welcomed.

Hanfis Weg in die Hölle » css

exploring css, inside w3c