Surf the Dream A discourse of links and articles from Justin Avery

Chaining pseudo selectors

I’ve been working on a sales dashboard for work that highlights the number of sales, number of meeting, contribution to the overall targets and a few other things that make a member of the sales team proud they’re hitting their targets.

The layout requirements I had for this part of the dashboard was

Here’s what we’re after….


The layout we are aiming for….

Zebra background with pseudo selectors

The zebra background is done through the use of the nth-child approach.

.sales-team:nth-child(2n) { background: #eee;}

What we’re doing here is saying we want to select the element with the style .sales-team and then for every second element, (2n), we should add a background: #eee;. That’s that problem sorted.

The next part is getting the golden border and the crown to appear.

Psu, psu, psuedo

This is where we apply a border and the crown on the first element.

The border can be added by selecting the :first-of-type pseudo element.

.sales-team:first-of-type { border: solid 5px gold;}

The next requirement is to add the crown as a background image. Now I wanted this to sit on the top corner of the first row so that it spills out of the container on the angle.

To accomplish this I wanted to add a :before pseudo element and use that as the background image for positioning, but I needed it to run on the same :first-of-type element.

Fortunately you can daisy chain pseudo elements together so I ended up with

.sales-team:first-of-type:before {
    content: '';
    background-image: url(../images/crown.svg);
    background-repeat: no-repeat;
    background-size: 75%;
    position: absolute;
    width: 150px;
    height: 150px;
    top: -45px;
    left: -40px;
    -webkit-transform: rotate(-18deg);
    -moz-transform: rotate(-18deg);
    -ms-transform: rotate(-18deg);
    -o-transform: rotate(-18deg);
    transform: rotate(-18deg);

The above code we are selecting the first element with :first-of-type, and then creating a :before pseudo element to contain the Crown.SVG file. This hook is then used to position the background image on the top left side of the element a rotate the crown.

The result is something that works quite nicely and cheers up the sales team, or at least the one at the top of the table.

Surf the Dream is a blog that has been running since the mid 2000's when it started on BlogSpot. Over the years it's been rebranded as (now my resume) and (which now redirects back to this site).

I offer consultation services through Simple Things, produce a range of educational pocket notebooks, write about the Universe and run a responsive design and a RWD Weekly Newsletter