CSS 3 - Final

Go back to CSS 3 - Part 4

Advanced Selectors

In CSS 3, you were introduced to the notion of CSS “selectors.” Throughout this post, in fact, we’ve been using selectors to target elements of the web page for CSS styles we created. For example, whenever we apply a series of properties and values to a “div” object, we are using a “tag selector” to affect all div elements in the web page. Of course, we don’t want all div elements to look the same, so we need to be more specific. Let’s first review the selectors you are familiar with, and then we’ll look at more advanced ways of targeting elements.

To review, there are several types of selectors:

Pseudo Class Selectors

Pseudo class selectors allow you to zero in on objects based on their state or relative position in the web page. This gives you ultimate flexibility in targeting elements based on user interactions or the content structure of your page.

State Selectors

Web page elements can often appear in different states based on user interaction. Forms, for example, can be dormant or actively in use (:focus). Radio buttons can be all in a state of undetermined status before a user makes up their mind (:indeterminate).

Most common are links. A link element <a> can have four states: a normal, resting state (:link), a rollover state (:hover), a click state (:active), and a visited state (:visited).

Using pseudo class selectors, you can apply different CSS styles to each state, and even animate the transition between them. In the example below, the link element is set to a melon color with no underline
(text-decoration: none;). There is a transition to change the “color” over a half second “.5”. Using the :hover pseudo class, when someone rolls over the link, a soft color shift from melon to blue occurs:

a {
    color: #f16e6e;
    text-decoration: none;
    -webkit-transition: color .5s;
}
a:hover {
             color: #446abf;
}

Contextual Selectors

While the above example addresses the various possible states of an element, you can also contextually target elements based on where they fall in your web page’s structure. For example, as shown in below, in a bulleted list, you may want to adjust the margin above the first item and below the last item, without affecting all the list items in between. You can use the :first-child and :last-child selectors respectively as follows:

li:first-child {
                  margin-top: -1em;
}
li:last-child {
                  margin-bottom: 2em;
}

Using such contextual pseudo selectors allows you to keep your HTML code clean. Notice how the HTML for the image in above has no classes or other code attached to individual tag elements. This way, you can make the bulleted list as long or short as you want and know that the first bullet item will always have a collapsed -1em margin above it, and the last bullet item in my list will always have a 2em margin below it.

<h2>Headline for bulleted list</h2>
  <ul>
        <li>First bullet item</li>
        <li>Second bullet item</li>
        <li>Third bullet item</li>
        <li>Last bullet item</li>
  </ul>

New CSS3 Pseudo Selectors

While pseudo classes have been part of CSS for several years, CSS3 introduces a host of 17 new pseudo classes that provide you with increasingly accurate ways of zeroing in on web elements and controlling the way they look. For a complete list, visit: http://www.w3schools.com/cssref/css_selectors.asp

 
One of the new selectors allows you to style links to PDFs differently than normal web links. For example, as seen in above, if you wanted to include an icon next to each PDF link, you could set up a CSS rule that would apply only when a link includes the .pdf extension. In the below CSS example, all regular links are simply a red color with no underline. In the second rule, however, any link to a PDF file will get an icon:

a {
     color:#bc1d33;
     text-decoration:none;
}  

a[href$=”.pdf”] {
                          display: block;
                          overflow:visible;
                          height: 35px;
                          padding-left: 40px;
                          padding-top: 10px;
                          background-image:url(pdf-icon.png);
                          background-repeat:no-repeat;
}

Here is the HTML code that places the links in the page, as shown in above. Notice that the first link “Download our catalog,” has a value of “Catalog.pdf ” for the href. The inclusion of “.pdf ” in this link triggers the contextual CSS rule to apply displaying the icon, whereas the second link “demo.html” appears without the icon.

<p>
     <a href=”Catalog.pdf”>Download our catalog.</a>
</p>
<p>
     <a href=”demo.html”>Or see an online demo.</a>
</p>

The advantage of using this new approach is that any link you include in your HTML that goes to a “.pdf ” file will automatically display with the correct styling. The old-school way to accomplish this would be to
create a class such as “.pdfLink” with differentiating CSS rules, and then remember to reference that class in your page’s HTML code for each link that needs to appear with the icon.

In conclusion, CSS is a powerful tool to help designers take stylistic control of their web sites. CSS3 takes us leaps and bounds forwards enabling animation and font control previously only possible through JavaScript, Flash, or other technology. Once you learn the basic premise of how CSS works, and learn the syntax, CSS is actually relatively simple. You do not need to be a computer programmer to create modern,
user friendly, and visually appealing web sites.

Back to - CSS 3 - Part 1