CSS selectors – beyond the normal!

CSS now provides incredible power for selecting elements within a page. If you are only used to selecting elements based on their class, ID, or element type, these techniques may open your eyes to new possibilities. I’d better qualify that bold claim.

CSS attribute selectors

You’ve probably used CSS attribute selectors to create rules. For example, consider the following markup:

<img src="https://placeimg.com/640/480/any" alt="an inquisitive cat" />

And this CSS:

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

This would select the img element in the preceding code, and any others on the page provided that they have an alt attribute.

In fact, to make something a little more useful, we could combine this with the :not negation selector (we will look at that in detail later in this chapter) to add a red border around any images that have no alt attribute or an alt attribute with...