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...