Anne van Kesteren

From a markover to pseudo-elements

(This is not part of the chapter learning)

Egor Kloos recently joined Digital Design's forums were he started to promote web standards right away. Mark Monster challenged him to do a markover (that is the correct spelling) of his table based design. So he did. Congrats.

I really like this, but this was a small introduction to the rest of this post, where I want to suggest a new property for CSS: ::duplicate(n). For those familiar with the CSS3 (improved) syntax this means it is a pseudo-element, which can have multiple versions, indicated by the variable n, which should be replaced with a number. As you can see the homepage of Mark has the capitalized word 'home' positioned left and right from the text. The word 'home' is ok with me, but when you specify it twice it is more presentational than structural. I think we can all make the link with the new property, can't we?

While I'm talking about CSS, I would also like to have ::line(n) ::nth-line(n), ::letter(n) ::nth-letter(n) and ::word(n) ::nth-word(n), any thoughts?

I changed all above to be more 'compatible' with the other CSS3 properties, like: :nth-child() pseudo-class (I know this is a pseudo-class and mine are pseudo-elemens, but it is easier when they are more constructed the same way). Note that the 'n' in 'nth' is not a variable and the 'n' between ( and ) is.


  1. This is something that allows for exceptions in the markup to be controlled. I'm not sure how useful such redundancy can be. The structure of the suggested pseudo-elements already exists within CSS3 so it should be posible.

    I just worry that a CSS file can then end up being bloated with a plethora of redundant code. If one has a clear view of what the content and presentational structure is it can work quite well. But what if we don't know how many letters a word contains? How many lines or words there are? In many cases this may not be too difficult. But what about large scale dynamic websites? Are we to guess what to put in the stylesheet?

    However the suggestion of ::duplicate(n) sounds more interesting to me. Avoiding the use of JavaScript in such a way could prove useful and even more so when used in combination with JavaScript.

    BTW. Cookiecrook had also used a pseudo-element suggestion on a multicolumn idea.

    Posted by Egor Kloos at