HTML5 and CSS3: Building Responsive Websites

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 probably used CSS attribute selectors to create 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. Or, let's say we wanted to select all elements with a data-sausage attribute:

[data-sausage] {
  /* styles */
}

All you need is to specify the attribute in squared brackets.

Tip

The data-* type attribute was introduced in HTML5 to provide a place for custom data ...