O'Reilly logo

Responsive Web Design with HTML5 and CSS3 by Ben Frain

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

New CSS3 selectors and how to use them

CSS3 gives incredible power for selecting elements within a page. You may not think this sounds very glitzy but trust me, it will make your life easier and you'll love CSS3 for it! I'd better qualify that bold claim…

CSS3 attribute selectors

You've perhaps used existing CSS attribute selectors to target rules. For example, consider the following rule:

img[alt] {
  border: 3px dashed #e15f5f;
}

This would target any image tags in the markup which have an alt attribute:

<img class="oscarMain" src="img/oscar.png" alt="atwi_oscar" />

You can also narrow things down by specifying what the attribute value is. For example, consider the following rule:

img[alt="atwi_oscar"] {
  border: 3px dashed #e15f5f;
}

This would only target ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required