CSS 3 selectors explained

In September and October of 2005 I published a series of articles that explained the selectors that are available in CSS 2.1. A quick summary is that most of the selectors described in those articles can be used now in modern browsers like Mozilla/Firefox, Safari, and Opera. We just need to wait for Internet Explorer to catch up before we can start using the full power of CSS 2.1 selectors. The good news is that Internet Explorer will catch up, at least to some extent, with the release of version 7.

If we look a little further ahead, there are even more powerful selectors waiting to be implemented and used in CSS 3. Many of the CSS 3 selectors have already been implemented in modern browsers, but in general support is far too patchy for developers to rely on these new selectors. However, there are cases where they can be used to add nice forward enhancing features, so I think taking a look at how the new selectors in CSS 3 work can be useful.

In this article, the specification I am referring to is the Selectors W3C Working Draft 15 December 2005. The new selectors described in the document will be used by CSS level 3, but may also be used by other languages. If you are reading this article months, or even years after that date it may be worth checking if a more recent version is available.

I am not going to explain the basics of how CSS selectors in general work here. If you need a refresher, a good place to start is CSS 2.1 selectors, Part 1.

First, a quick overview of the selectors that are new in CSS 3:

Overview of CSS 3 selector syntax
Selector type Pattern Description
Substring matching attribute selector E[att^=”val”] Matches any E element whose att attribute value begins with “val”.
Substring matching attribute selector E[att$=”val”] Matches any E element whose att attribute value ends with “val”.
Substring matching attribute selector E[att*=”val”] Matches any E element whose att attribute value contains the substring “val”.
Structural pseudo-class E:root Matches the document’s root element. In HTML, the root element is always the HTML element.
Structural pseudo-class E:nth-child(n) Matches any E element that is the n-th child of its parent.
Structural pseudo-class E:nth-last-child(n) Matches any E element that is the n-th child of its parent, counting from the last child.
Structural pseudo-class E:nth-of-type(n) Matches any E element that is the n-th sibling of its type.
Structural pseudo-class E:nth-last-of-type(n) Matches any E element that is the n-th sibling of its type, counting from the last sibling.
Structural pseudo-class E:last-child Matches any E element that is the last child of its parent.
Structural pseudo-class E:first-of-type Matches any E element that is the first sibling of its type.
Structural pseudo-class E:last-of-type Matches any E element that is the last sibling of its type.
Structural pseudo-class E:only-child Matches any E element that is the only child of its parent.
Structural pseudo-class E:only-of-type Matches any E element that is the only sibling of its type.
Structural pseudo-class E:empty Matches any E element that has no children (including text nodes).
Target pseudo-class E:target Matches an E element that is the target of the referring URL.
UI element states pseudo-class E:enabled Matches any user interface element (form control) E that is enabled.
UI element states pseudo-class E:disabled Matches any user interface element (form control) E that is disabled.
UI element states pseudo-class E:checked Matches any user interface element (form control) E that is checked.
UI element fragments pseudo-element E::selection Matches the portion of an element E that is currently selected or highlighted by the user.
Negation pseudo-class E:not(s) Matches any E element that does not match the simple selector s.
General sibling combinator E ~ F Matches any F element that is preceded by an E element.

If all that doesn’t make much sense right now, don’t worry. Each selector will be described in more detail in this article, and there are examples of how each selector can be used.

Substring matching attribute selectors

This whole group of selectors is new, and the selectors in it let developers match substrings in the value of an attribute.

Assume that you have an HTML document that contains the following markup structure:

  1. <div id="nav-primary"></div>
  2. <div id="content-primary"></div>
  3. <div id="content-secondary"></div>
  4. <div id="tertiary-content"></div>
  5. <div id="nav-secondary"></div>

By using the substring matching attribute selectors you can target combinations of these structural parts of the document.

The following rule will set the background colour of all div elements whose id begins with “nav”:

  1. div[id^="nav"] { background:#ff0; }

In this case the selector will match div#nav-primary and div#nav-secondary.

To target the div elements whose id ends with “primary”, you could use the following rule:

  1. div[id$="primary"] { background:#ff0; }

This time the selector will match div#nav-primary and div#content-primary.

The following rule will apply to all div elements whose id contain the substring “content”:

  1. div[id*="content"] { background:#ff0; }

The elements that will be affected by this rule are div#content-primary, div#content-secondary, and div#tertiary-content.

The substring matching attribute selectors are all fully supported by the latest versions of Mozilla, Firefox, Flock, Camino, Safari, OmniWeb, and Opera, so if it wasn’t for Internet Explorer we could start using them now.

The :target pseudo-class

URLs with fragment identifiers (an octothorpe, “#”, followed by an anchor name or element id) link to a certain element within the document. The element being linked to is the target element, and the :target pseudo-class makes it possible to style that element. If the current URL has no fragment identifier, the :target pseudo-class does not match any element.

Assuming the HTML structure mentioned earlier in this document, the following rule would put an outline around div#content-primary when the URL contains that fragment identifier:

  1. div#content-primary:target { outline:1px solid #300; }

An example of such an URL is http://www.example.com/index.html#content-primary.

The :target pseudo-class is currently supported by browsers based on Mozilla and Safari.

UI element states pseudo-classes

The :enabled and :disabled pseudo-classes

The :enabled and :disabled pseudo-classes allow developers to specify the appearance of user interface elements (form controls) that are enabled or disabled, provided that the browser allows styling of form controls. The following rules will apply different background colours to single line text inputs depending on whether they are enabled or disabled:

  1. input[type="text"]:enabled { background:#ffc; }
  2. input[type="text"]:disabled { background:#ddd; }

The :checked pseudo-class

The :checked pseudo-class allows developers to specify the appearance of checked radio and checkbox elements. Again, this is provided that the browser allows styling of form controls. This CSS rule will apply a green border to checked radio and checkbox elements:

  1. input:checked { border:1px solid #090; }

The UI element states pseudo-classes are currently supported by Opera and browsers based on Mozilla.

Note that many web browsers restrict how much the appearance of form controls can be changed by web developers. More on that subject is available in my articles Styling form controls and Styling even more form controls.

Structural pseudo-classes

The structural pseudo-classes allow developers to target elements based on information that is available in the document tree but cannot be matched by other simple selectors or combinators. The structural pseudo-classes are very powerful, but unfortunately current browsers only support a few of them.

The :root pseudo-class

The :root pseudo-class targets the document’s root element. In HTML, the root element is always the HTML element, which means that the following two rules are the same (well, almost - :root has a higher specificity than html):

  1. :root { background:#ff0; }
  2. html { background:#ff0; }

The :root pseudo-class is currently supported by browsers based on Mozilla and Safari.

The :nth-child() pseudo-class

The :nth-child() pseudo-class targets an element that has a certain number of siblings before it in the document tree. This argument, which is placed within the parentheses, can be a number, a keyword, or a formula.

A number b matches the b-th child. The following rule applies to all p elements that are the third child of their parent element:

  1. p:nth-child(3) { color:#f00; }

The keywords odd and even can be used to match child elements whose index is odd or even. The index of an element’s first child is 1, so this rule will match any p element that is the first, third, fifth, and so on, child of its parent element:

  1. p:nth-child(odd) { color:#f00; }

The following rule matches p elements that are the second, fourth, sixth, and so on, child of their parent element:

  1. p:nth-child(even) { color:#f00; }

The formula an + b can be used to create more complex repeating patterns. In the formula, a represents a cycle size, n is a counter starting at 0, and b represents an offset value. All values are integers. Understanding how this works is easier when you look at a few code examples, so let’s do that.

The following rules will match all p elements whose index is a multiple of 3. In the first rule, b is zero and could have been omitted, as in the second rule:

  1. p:nth-child(3n+0) { color:#f00; }
  2. p:nth-child(3n) { color:#f00; }

The offset value can be used to define at which child a repeating rule starts to apply. If you have a data table with 20 rows and want every odd row after the tenth row to have a different background colour, you can use this rule:

  1. tr:nth-child(2n+11) { background:#ff0; }

Since n starts at 0, the first tr element to be affected is the 11th. Next is the 13th, then the 15th, and so on.

More details are available in the :nth-child() pseudo-class section of the CSS 3 Selectors specification.

So, what about browser support for this very useful selector? Not good at all. As far as I can tell, no browser supports this or any of the other “nth” selectors. Please correct me if you know otherwise.

The :nth-last-child() pseudo-class

The :nth-last-child() pseudo-class works just like the :nth-child() pseudo-class, except that it targets an element that has a certain number of siblings after it in the document tree. In other words, it starts counting from the last child instead of the first, and counts backwards. The following rule will match the second-to-last tr element of a table:

  1. tr:nth-last-child(2) { background:#ff0; }

The :nth-last-child() pseudo-class is currently not supported by any browsers.

The :nth-of-type() pseudo-class

The :nth-of-type() pseudo-class works exactly like the :nth-child() pseudo-class, but only counts those elements that are of the same type as the element the rule is applied to. This rule will match every p element that is the third p element of its parent:

  1. p:nth-of-type(3) { background:#ff0; }

This can be useful if you want to make sure that you are really targeting the third p element. At first you might think that you could just as well use the nth-child pseudo-class, but :nth-child(3) will take all sibling elements into account, so the result will be different unless all p elements only have siblings that are also p elements.

The :nth-of-type() pseudo-class is currently not supported by any browsers.

The :nth-last-of-type() pseudo-class

The :nth-last-of-type() pseudo-class targets an element that has a certain number of siblings of the same element type after it in the document tree. Just like the :nth-last-child() pseudo-class, it starts counting from the last child instead of the first, and counts backwards. The following rule will match each second-to-last sibling of type p:

  1. p:nth-last-of-type(2) { background:#ff0; }

The :nth-last-of-type() pseudo-class is currently not supported by any browsers.

The :last-child pseudo-class

The :last-child pseudo-class targets an element that is the last child of its parent element. It is the same as :nth-last-child(1). This rule will match all p elements that are the last child of their parent element:

  1. p:last-child { background:#ff0; }

The :last-child pseudo-class works in browsers based on Mozilla. It is not supported by Opera and is buggy in Safari (the above rule matches all p elements in the document). Surprisingly it works as expected in OmniWeb (tested in version 5.1.1), despite that browser being based on Safari. That could be caused by a regression in the latest version of Apple WebKit, since OmniWeb is usually built on a slightly older version of WebKit than what Safari is using.

The :first-of-type pseudo-class

The :first-of-type pseudo-class targets an element that is the first sibling of its type. it is the same as :nth-of-type(1).

  1. p:first-of-type { background:#ff0; }

The :first-of-type pseudo-class is currently not supported by any browsers.

The :last-of-type pseudo-class

The :last-of-type pseudo-class targets an element that is the last sibling of its type. it is the same as :nth-last-of-type(1).

  1. p:last-of-type { background:#ff0; }

The :last-of-type pseudo-class is currently not supported by any browsers.

The :only-child pseudo-class

The :only-child pseudo-class targets an element whose parent element has no other element children. It is the same (but with a lower specificity) as :first-child:last-child or :nth-child(1):nth-last-child(1).

  1. p:only-child { background:#ff0; }

The :only-child pseudo-class works in browsers based on Mozilla. Safari seems to interpret it as :first-child (the above rule matches all p elements in the document that are the first child of their parent element).

The :only-of-type pseudo-class

The :only-of-type pseudo-class targets an element whose parent element has no other children of the same element type. It is the same (but with a lower specificity) as :first-of-type:last-of-type or :nth-of-type(1):nth-last-of-type(1).

  1. p:only-of-type { background:#ff0; }

The :only-of-type pseudo-class is currently not supported by any browsers.

The :empty pseudo-class

The :empty pseudo-class targets an element that has no children. That includes text nodes, so of the following elements, only the first is empty:

  1. <p></p>
  2. <p>Text</p>
  3. <p><em></em></p>

The following CSS rule will match that first element:

  1. p:empty { background:#ff0; }

The :empty pseudo-class is currently supported by browsers based on Mozilla. Safari erroneously applies the rule to all elements of the given element type.

The negation pseudo-class

The negation pseudo-class, written :not(s), takes a simple selector as an argument. It targets elements that are not targeted by the simple selector. For example, the following CSS will target any element that is not a p element:

  1. :not(p) { border:1px solid #ccc; }

The negation pseudo-class currently works in browsers based on Mozilla and Safari.

The ::selection pseudo-element

The ::selection pseudo-element matches the portion of an element that is currently selected or highlighted by the user. One possible use for this would be to control the appearance of selected text.

Only a few CSS properties apply to ::selection pseudo-elements: color, background, cursor, and outline.

The following rule will make the foreground colour of a selection red:

  1. ::selection { color:#f00; }

The ::selection pseudo-element currently only works in browsers based on Safari. The behaviour is a bit unpredictable, so the Safari implementation needs a bit of improvement. Mozilla based browsers support it if you use a -moz- prefix: ::-moz-selection. The prefix will probably be removed eventually.

The General sibling combinator

The general sibling combinator consists of two simple selectors separated by a “tilde” (~) character. It matches occurrences of elements matched by the second simple selector that are preceded by an element matched by the first simple selector. Both elements must have the same parent, but the second element does not have to be immediately preceded by the first element. This CSS rule will target ul elements that are preceded by a p element with the same parent:

  1. p ~ ul { background:#ff0; }

The general sibling combinator is currently supported by Opera and browsers based on Mozilla.

Better browser support wanted

Some CSS 3 selectors are widely supported. Unfortunately, some of the most useful selectors are either not supported at all or have very limited support in current browsers. That makes many of the selectors described in this article more or less useless on today’s web. Don’t be afraid to experiment though. You can still use those that are supported to provide forward enhancement to advanced browsers.

So, which browser do you think will be the first to support most or all CSS 3 selectors? Safari, Firefox, or Opera? Or maybe even Internet Explorer?

Translations

This article has been translated into the following languages:

Posted on January 10, 2006 in CSS

Comments

  1. Great article! CSS 2.1 is supposed to have limited search/value matching for attributes isn’t it?

  2. I’ve been using these for a while — they are insanely cool. Even Firefox doesn’t support all of them yet, but the ones that work allow you to cut out a whole lot of crap in your structural markup.

  3. Well, Merlin (Opera 9prev1) is showing some progress, so I have hopes for the final. Other than that it looks like more or less the same across the board when it comes to CSS3 selectors, as long as Internet Explorer is left out.

    Selectors is the least of our problems though. Getting them working right shouldn’t be difficult even for the IE team. It’s when selectors kick in that the real fun begins - with bugs and all.

    Nice article btw. I’ve been testing CSS3, selectors and all, for quite a while (years), and am busy finding good use for whatever works in the latest browser-versions.

  4. Interesting article - I hope the IE7 dev team has read the specs.

    Does anybody know if there is a table of browsers and supported css that is kept uptodate?

    It’d be a good thing to have as most decent browsers keep adding support reasonably steadily.

  5. Awesome article Roger - thanks.

    When you came back from your vacation last year, I was afraid you would be posting less - but you are still posting awesome articles with a great frequency. Thanks!

  6. Once again, thanks, great summary!

  7. Mozilla based browsers have limited support for ::selection, just they currently use a proprietary pseudo-element ::-moz-selection, so more than likely, once they finish support for it, they will drop the -moz- prefix and use the w3c pseudo-element.

  8. Thanks for the update - not to see who’s going to support it, and how to have css3 selectors and still style the stuff for css2.

  9. I’m definitely bookmarking this page for reference. I use :nth-child() and :nth-of-type() a lot for local HTML pages, as well as related selectors, and Konqueror displays them fine for my purposes. It’s so wonderful to style table cells with four colors alternating by rows and cols.

  10. EXTREMELY useful article. I was hoping to get some information about which browsers are supporting what CSS3 properties and selectors but it’s difficult to find. Would you know of any good sources?

    Just wondering.

  11. Browser have more support for CSS3 than I expected. Nice summary.

    :empty however seems to work just fine in my Firefox 1.0.7 istallation.

    Funny thing that something like the following is valid: E:not(*)

  12. Craig, check Wikipedia’s comparison of layout engines page. It probably won’t differentiate between “full support” and “partial support”, but it’s better than nothing, if no one else knows a better source for support listings.

  13. Actually it looks like a more extensive resource than anything I’ve seen yet. Thanks for turning me on to it.

  14. January 10, 2006 by Eric S

    About IE7: The last I heard, and this was two months ago or so, so it may not be current, was that MS was dragging its feet on CSS 2.1 since it isn’t an officially finalized spec, so we have little hope of seeing CSS 3.0 support in IE7, IMO. Very sad, and rather silly of them, since I don’t think there have been any changes in the 2.1 spec in a long time. Sure, 3.0 might not be fully finalized, so I can see their point there, though I might not agree with it.

  15. January 10, 2006 by Roger Johansson (Author comment)

    Ara: Yep, check out “Attribute selectors” in CSS 2.1 selectors, Part 2.

    Jon B, Craig: Web browser CSS support is a reasonable extensive chart. It doesn’t cover Safari though.

    Steven: Ah, I didn’t know that.

    Chris: Interesting that Konqueror supports :nth-child() and Safari does not. Unless I made a mistake during my (limited) testing. I’ll take another look at it in case I messed up.

    gerben: You are correct. :empty does work in Gecko browsers.

  16. Great Article. These’ll be useful for…everything. Almost as cool as XHTML 2.0.

  17. I’m currently building an overview of browser support for all those selectors. Work in progress. Bear in mind: this is basic support. If you start mixing and ripping, there are a few bugs under the hood (cough Safari).

  18. Oh… we have the comparison page for a long long time.

  19. :only-child was listed as being added for Firefox 1.5, and a quick test just showed that it seems to be working fine.

  20. @Robin: Yea I tested as I read and The :only-child pseudo-class is working as well as :empty

    It’s alway nice to have stuff explained, thanks Roger.

    BTW I might be going to @media this year.

  21. January 11, 2006 by Roger Johansson (Author comment)

    Robin, Mats: Yep, :only-child does indeed work in browsers based on Mozilla. I have updated the article. Thanks!

  22. The things you can do with

    id=”content-primary” id=”content-secondary” and then div[id*=”content”] { style:whatever; } can be replicated now with

    class=”content primary” class=”content secondary” and div.content { style: whatever; }

    can’t it? Any advantage to the new way? I am a CSS amateur, is it not valid to have spaces in your class tags like that?

  23. Nice work, Roger.

    Note for German readers: I recently wrote an article about future CSS, which covers CSS 3 selectors as well. I’m currently writing another article about the “:target” pseudo-class (watch my RSS feed).

  24. January 11, 2006 by zcorpan

    In this article, the CSS specification I am referring to is the Selectors W3C Working Draft 15 December 2005.

    Selectors is not a CSS specification. It is a separate specification so that other languages can use it and reference it.

    The :root pseudo-class targets the document’s root element. In HTML, the root element is always the HTML element, which means that the following two rules are the same:

    :root has a higher specificity than html, so they are not quite the same.

  25. May I also offer a more usefull example on using :not(E)

    input[type=”text”]:not([size]) {width: 15em; border: 1px solid red;}

    This makes any input[type=”text”], that hasn’t got a size attribute, 15em’s wide with a red border.

    Which works in FF 1.5

  26. January 11, 2006 by daniel

    yeah thanx 4 the great article!

    nth-child roxors, its a pitty its not supported yet. with all those selectors its going to be real fun to realize complicated designs with few code :)

    cheers from berlin

  27. I got to playing about and it would appear that the Mozilla support for :empty needs a bit of work. I made this test page after encountering an issue with Firefox 1.5 whereby the body element is trigger the :empty rule, despite the fact it’s not empty. But I might be missing something.

  28. January 12, 2006 by SugarKane

    Just a short note on a typo. The second last sentence has “So, which browser do youwill be the first to support most or all CSS 3 selectors?”

    I presume “youwill” should be “do you think will”?

    Great article as always though.

  29. @Simon Proctor: Maybe :empty only works in Standard Compliance mode and not in Quirks mode.

    Just a thought …

  30. As for Mozilla and :empty and the body element, :empty matches body whether in quirks or standards compliance mode. (The version of Opera I have install doesn’t acknowledge :empty, and Konqueror wields it flawlessy in limited testing.)

  31. Mats: I was in a hurry. And it would appear to be in both cases anyway. I’ve posted a bug about it.

  32. Thanks for the summary Roger!

    I must admit that I don’t see much use for many of these new selectors, especially the :root and :checked selectors.

    What I would have like to see was a parent-type selector (let’s use $ as the character). For example, if two snippets of code were <p>Paragraph <a>link</a> text</p> and <p>Paragraph text</p> , then perhaps p {color: green;} would color the second paragraph text green but p $ a {color: red;} would color the first paragraph text red.

    Apparently (no pun intended) there is an XML selector that is able to do this, something about a node, but (whatever it is called) it does not exist for (X)HTML.

  33. Ooops, typo. What I meant to say in the first sentence was that I didn’t see much use for the :root and :selection selectors.

  34. Jules: :root is useful in a XML context where you don’t necessarily know what the root element is called (unlike in XHTML/XML where it’s always html). :selection can be another way of customising the look and feel of your site - for example here Roger could set the selection background colour to a burgundy from his header image to reenforce the styling scheme.

  35. January 14, 2006 by Roger Johansson (Author comment)

    Pauly: Well, there could be cases where the class names or ids you are matching aren’t as obvious as in my example, or you may not be able to change the source code to use multiple class names (which is valid).

    Jens: Thanks. I would love to see English versions of some of your articles btw :-).

    zcorpan: Correct. I left that out on purpose, but since you mention it I have updated the article to point out that the Selectors specification may be used by other languages than CSS, and that :root has a higher specificity than html.

    Mats: Thanks, that’s a better and more real-world example of how the negation pseudo-class can be use.

    SugarKane: Yep, that’s a typo. Thanks for spotting it!

    Jules: Robin pretty much explained how the :root pseudo-class and the ::selection pseudo-element can be used.

    Some kind of parent selector would be very useful though.

  36. Great Article!

  37. January 15, 2006 by Llull

    This comparison look promising and related.

    “The following tables compare CSS compatibility and support for a number of layout engines.”

  38. 1/ Regarding the :nth-child pseudo-classes, it might be worth mentioning that the much maligned Tasman rendering engine also has full support in its 0.9 version (what could have been IE 6 for Mac). It is available for US citizens only as MSN for OS X (subscription based), and is used for html rendering in the latest version of Entourage on OS X.

    2/ The nightly builds of Webkit now have more and better (!) support for some of those pseudo-classes: fixed bugs(regressions) in :last-child, support for :last-of-type, :first-of-type, :only-child.

  39. January 16, 2006 by Roger Johansson (Author comment)

    Philippe: Thanks, that’s very interesting info. Too bad there is no way for most people to get their hands on MSN for OS X.

  40. I haven’t really had time to check the spec yet, so thanks for the summary Roger. It’s almost as if we’ve been given too much power. I’m sure there are good times ahead!

  41. I just thought of a good way to use one of these selectors:

    a[href^='http://']:after {
    content: url(images/external-link.png);
    }
    
    a[href^='#']:after {
    content: url(images/pagelink.png);
    }
    

    That could put special images after internal page links and external links.

  42. January 25, 2006 by Ryan Christensen

    I am very wxcited about this. Is like XPath in CSS and has platform creation capabilities immedately when IE is at decent levels. Get your ideas going now. Dynamic CSS mush easier, web applications with spreadsheets, documents, find replace move thorugh, highlighting keywords forward and back. You can do this now but standard ways to do things are key to the weh as a platform to be successful. Web 2.0 and AJAX etc were all coined as this time has been emerging, web apps in 06 will be fun to make and watch.

  43. February 6, 2006 by Ignacio Javier

    Everything is a hard balance between happiness and money. Do not take too much from wich you cannot expect still. World does not invent truths. They’are only cleared, but still false is clear.

  44. You can paritally do this with Javascript NOW! You can cycle styles and set the class. Although this is very cool to have it in CSS. I bet with a weekend or two someone can make a lib (of course it already exists that makes it easy to do). Although its pretty simple.

  45.  var tags = isDOM ? document.getElementsByTagName('*') : [];
     for (var i = 0; i 
    
  46.  var tags = isDOM ? document.getElementsByTagName('*') : [];
     for (var i = 0; i < tags.length; i++)
     {
      if (tags[i].title)
      {
       // You may wish to do some string processing here, for instance split the TITLE into two
       // strings based on the | character or similar, and use one for a tip heading in a template.
       tags[i].onmouseover = new Function('staticTip2.newTip("tagTip' + i + '", -35, 10, 120, "' +
       tags[i].title + '")');
       tags[i].onmouseout = new Function('staticTip2.hide()');
       tags[i].title = '';
      }
     }
    
  47. March 16, 2006 by terrym

    After reading this article, I began wondering if it would be suitable for my problem. I have a page using mainly CSS to emulate frames. On the left is a standard sort of menu. The rest of the page is a DIV whose id=”main”, and it starts with some text. When I click on a menu item, I want the selected page (an html file) to be displayed in the “main” div and obviously replace the text already there. Does anyone think this would be posible? Thanks in advance.

  48. July 15, 2006 by rewst

    live this

  49. August 8, 2006 by somebody

    CSS3 Now!!! Programming Language

  50. I dont know about CSS..

    http://www.decloak.com/Dev/CSSTables/CSSTables01.aspx

  51. August 24, 2006 by Roger Johansson (Author comment)

    ROTFL, that decloak Tables vs CSS thing is hilarious :-D.

  52. December 27, 2006 by Terry Githe

    A parent selector would be very nice indeed!

  53. December 27, 2006 by Terry Githe

    A parent selector (E < F) would be very nice indeed!

  54. If only this list was complete. (Stumbled upon this post via Martin Labuschin who made the German translation - apologies for the missing link, but Markdown is strange anyway.)

  55. Uh - apologies again, it’s Martin’s translation that is not complete. So I may just emphasize my first comment, #23 …

  56. “Only a few CSS properties apply to ::selection pseudo-elements: color, background, cursor, and outline.”

    I was interested in the proprietary ::-moz-selection pseudo-element and tried it out in Firefox 1.5. Color and background worked, but cursor and outline did not. Also trying to style ::selection as well as ::-moz-selection blanked the ::-moz-selection styles…

    Just a heads up…

  57. @Jens Meiert: thanks for the german article about future CSS. Greats Walter

  58. May 23, 2007 by Dane Cook

    Hope this list isn’t complete. All I needed was a parent-selector. And I see I’m not the only one. Something like:

    H < P[class]{…} A[class]:parent{…}

    or a variation of the sibling-selector, but this time you style the first one:

    father + son{ ..style for father-selector..}.

    the General sibling combinator (p ~ ul ) could work, but I need it to be more specific.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.