Mozilla Hacks

new CSS3 properties in Firefox 3.5 – *-of-type

By

Posted on June 30, 2009 in 35 Days, CSS, Feature, and Firefox

In today’s feature post we’ll talk briefly about three new CSS3 pseudo-classes: only-of-type, first-of-type and last-of-type. These are all very similar to the *-nth classes we covered in an earlier post.

first-of-type and last-of-type

These two pseudo-classes allow you to select the first and last item in a list of siblings within a particular element. You can use this to color the first item in a list, use opacity to make the last paragraph on a page fade out or a number of other things. Here’s an example that sets small caps on the first paragraph of a document:

#type-ex1 div:first-of-type {
    font-variant: small-caps;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nulla neque, cursus venenatis vehicula ac, rutrum id libero. Nullam porttitor ultricies eros, laoreet mollis nunc vestibulum in. Sed iaculis nibh nec tellus vulputate pulvinar. Aliquam ultricies mauris vel nulla semper ac dignissim arcu sollicitudin.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras molestie elit sed libero pretium faucibus. Ut sed lacus eget est gravida aliquet sed sed risus. Maecenas vitae volutpat purus. Fusce porttitor aliquam lectus sit amet vehicula. Nulla molestie mi lacus.

only-of-type

only-of-type is similar to the previous two, but only selects an element if it has no siblings with the same name. Here’s a somewhat contrived example* that will hide single images inside of a div. If there’s more than one image in the div they will be visible:

.type-ex2 img:only-of-type {
    display: none;
}
This is some text before a single image.

This is some text after a single image.
This is some text before two images.


This is some text after two images.

And that’s it. Enjoy!

[ * Note: if someone can come up with a better example for only-of-type I’m all ears. There are very few examples of where this is useful. ]

7 comments

  1. Ben Truyman

    As a front-end web developer, I’m happy just to have access to the :first-child and :last-child pseudo selectors in most browsers (lookin’ at you IE6). But this is great as it reduces the amount of additional markup needed.

    June 30th, 2009 at 21:39

  2. Asrail

    test

    p:first-of-type:before {content: “Read some paragraphs:”; display:block}
    p:only-of-type:before {content: “Read a paragraph”; display:block}

    Lorem Ipsus
    Yay

    June 30th, 2009 at 21:47

  3. Asrail

    It should have a preview feature…

    <html>
    <head>
    <title>test</title>
    <style type=”text/css”>
    p:first-of-type:before {content: “Read some paragraphs:”; display:block}
    p:only-of-type:before {content: “Read a paragraph”; display:block}
    </style>
    </head>
    <body>
    <p>Lorem Ipsus</p>
    <p>Yay</p>
    </body> </html>

    June 30th, 2009 at 21:58

  4. Asrail

    Another example would be displaying a LI inline if there is only one inside an UL and displaying as a list otherwise.

    June 30th, 2009 at 22:04

  5. Edward Lee

    All these -of-type seem more useful for dynamically generated content, and something that is only-of-type must be first-of-type AND last-of-type.

    If you were using first-of-type to style with a start-cap background and last-of-type for the end-cap; you would need to make sure you specially handle the case where you have 1 element because it would show up as a single start-cap or a single end-cap depending on the order of your styles (because the last background style wins).

    And instead of needing to type :first-of-type:last-of-type { background: both-cap.png }, you can use just :only-of-type.

    July 1st, 2009 at 00:18

  6. Ehsan Akhgari

    One practical example of using :only-of-type may be building an image gallery, where for example you put a number of elements next to each other with appropriate floating, etc.

    Now, if a gallery contains only one image, you don’t want it to appear left-floated next to nothing; so you can do something like this (crude example):

    img {
    float: left;
    margin: 1em;
    width: 5em;
    }

    img:only-of-type {
    float: none;
    margin: .5em;
    width: 20em;
    }

    July 12th, 2009 at 11:27

  7. […] new CSS3 properties in Firefox 3.5 – *-of-type (hacks.mozilla.org) Share: […]

    August 11th, 2009 at 01:10

Comments are closed for this article.