Are you using all of the available CSS selectors?

Here you can find some ‘real-life’ examples of CSS selectors that show how programmers use a combination of these to create their own work. I must say that this research was not very easy to do: in fact, other than class and ID selectors (and a combination of both), there are only a handful of web designers who take full advantage of the selectors and their range of options. I came to ask myself, “Are they all indispensable?” Before I answer this question, let’s check out some practical applications of these selectors.

Attribute selector to highlight areas of text

This example is taken from the Pixelmatrix Design website, specifically from the “Contact” section.

These are the rules that define the overall look of an email form where the text is entered, and also it provides for a visual feedback on the selected area. Let’s see how this is done:

input[type="text"]{
  border: solid 1px rgba(0,0,0,0.2);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  padding: 5px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.1em;
  color: #666;
}

input[type="text"]:focus {
  border-width: 2px;
  border-color: #709d21;
  padding: 4px;
  outline: 0;
  color: #444;
}

The first step is to select an area of text using the attribute selector:

input[type="text"]

Then a thin, grey border and padding are applied and the font is modified. Note how two ‘proprietary’ CSS rules are applied:

-webkit-border-radius: 5px;
-moz-border-radius: 5px;

to obtain round borders for both Safari and Firefox, respectively.

The second rule comes into effect only when a given area is highlighted, thanks to the pseudo-selector : focus. In this case, a green border is applied, which is thicker than the previous one.

pixelmatrix

Adjacent element selector

This example is taken from the ‘About’ section of the HappyCog website, which is an American web company.

In this page, you will find a list of people who work for the different divisions within the company. Each list is found in a div with a ‘reference’ class and it is preceded by a title, that has an h2 tag. For example:

<h2>Happy Cog New York</h2>
  <div class="reference following">
    <div id="kissane" class="entry">
      <h3>
      </h3>
      <h4>Content Strategy Director</h4>
      <p>A writer and strategist who focuses on clear and precise business communication as a prerequisite for strong relationships with employees and customers.</p>
    </div>
    <div id="hess" class="entry">
    ....
    </div>
    <div id="gustafson" class="entry">
    ...
    </div>
    <div id="murtaugh" class="entry">
    ...
    </div>
</div>

This is the portion of CSS code that we are mostly interested in:

#main h2 {
  border-bottom:1px solid #E6DFCE;
  padding:0 0 0.25em;
}

.reference {
  border-top:1px solid #E6DFCE;
  float:left;
  margin:0 0 4em;
}

As you can see, the ‘reference’ class has a top border that is one pixel thick, and the h2 title also has a lower border of the same exact characteristics. The two rules in this case are clearly in contrast with one another, resulting in the following situation:

happycog1

P

To eliminate the double border, one could have applied a relevant class to the title, but the developers of the website have been more keen and have applied the following rule:

h2 + .reference {
  border: none;
  margin-top: -15px;
}

In this case, the fact that, in the markup, the title is always located before the div with ‘reference class’ is used to the advantage of the programmer. Following this, the extra border is eliminated, and the margin between the two elements is reduced.

Image rollover and attribute selector

This example, which comes from the website “An Event Apart“, a conference on web standards and general web design held in the United States, is the one that impressed me the most. Basically a roll-over effect is created using a number of attribute selectors.

Let’s start by looking at the html code:

<a href="http://alistapart.com/">
  <img alt="A List Apart" src="/i/09/ala-logo.gif"/>
</a>
<a href="http://happycog.com/">
  <img alt="Happy Cog" src="/i/09/happycog-logo.gif"/>
</a>

Here are some simple links, shown as images.
The concept behind CSS code is as follows: load the images that you want to show as background to a link during mouse roll-over and hide the main image, so that the background is visible.

In code:

.associated a {
  display: block;
  width: 121px;
  background: 50% 0 no-repeat;
}
.associated a[href*="alistapart"] {
  background-image: url(/i/09/ala-logo-h.gif);
}
.associated a[href*="happycog"] {
  background-image: url(/i/09/happycog-logo-h.gif);
}

These two rules change the look of your links and also apply the two background images. But the really “cool” thing is:

.associated a[href]:hover img {
  visibility: hidden;
}

aneventapart

Let’s look at this rule: This applies to all of the img elements that are born from an element a with href attribute, only on mouse roll-over. Accordingly, these elements become hidden, showing the image underneath and creating a desired roll-over effect.

Final considerations

A careful analysis of all the selectors that are used by webdesigners reveals that 90% of all websites, even the most graphically-intensive ones, are realized using only 10% of the available selectors that contain a W3C specification. This could be due to a number of reasons: often the additions that are introduced as part of a new specification are not based on real-life needs or applications. Rather, they are based on an assumption of future usefulness. One also needs to consider that on the other hand, many webdesigners tend to ignore solutions that are based using a combination of selectors, preferring an easier approach, which is based on adding class and/or ID to the tag in question. It follows to ask then: are all the existing selectors really necessary?

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: ,

The Author

Fond of web design, takes delight in creating (X)HTML+CSS layouts. A maniac of polished and tidy codes, the type of person you find in your house straightening the paintings hanging on the wall. He has made his mind of becoming a web designer with a capital “w”, and spends entire nights awake in order to make his dream come true.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

4 comments

Trackback e pingback

  1. Tweets that mention Are you using all of the available CSS selectors? | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by Your Inspiration Web, nando pappalardo and Sergio Arantes, Zave Designer. Zave Designer …
  2. Do you know there are other ways of using css selectors? (Part 1) | Your Inspiration Web
    [...] Are you using all of the available css selectors? Tags: CSS, xhtml …
  3. Do you know there are other ways of using CSS selectors? (Part 2) | Your Inspiration Web
    [...] Are you using all of the available css selectors? Tags: CSS, selectors [...]
  4. Do you know there are other ways of using CSS selectors? (Part 3) | Your Inspiration Web
    [...] Are you using all of the available css selectors? Tags: CSS, selectors [...]

Leave a Reply

Current month ye@r day *