Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
While attribute selectors are not brand-new to CSS, in fact, they have been around since CSS 2.1, the release of CSS3 marks the addition of several new powerful attribute selector types that will make targeting elements based on attribute and attribute values even easier. Before you jump and start using that those, let's take a moment to explore their syntax, how they work, and the new attribute selectors available to us in the Level 3 selectors module. CSS 2.1 included four possible attribute selector syntaxes, which allow you to target elements based on the presence of an attribute or a specific attribute value.
If you're new to writing attribute selectors, their syntax can seem a little bit complicated at first. So, let's explore the syntax in more detail and examine which elements they would target. The first variation is pretty basic. It simply checks for the presence of the listed attribute. If the attribute is found, the element is targeted. In this example, we would check for any link tag with an href element. If you want to be more specific, you can write attribute selectors that target an explicit attribute value. Here you can see two variations on that. One uses quotation marks to surround the value while the second one does not.
The quotation marks are not required unless the attribute value has multiple words or punctuation. In those cases, the quotation marks force the values to be read as a literal string. By adding a tilde in front of the equal sign you can change the attribute value to match any space separated values where at least one of the values matches the inputted string. This is a little easier to visualize that you can see here, where the attribute selector is matching any image that contains thumbnail in it's all tag value.
You can even get specific about hyphenated attribute values. By adding the pipe character before the equal sign you are targeting any element that either has the specific value, or a hyphen separated list that begins with that value. Now, I doubt you're going to use this one very much as it's primarily designed to search for language sub-code matches, but hey, you never know. So those are the attribute selectors that we could use in CSS 2.1. CSS3 extends attribute selectors by giving us more ways to match substrings within the attribute values.
First, by adding the caret character before the equal sign, we search for attribute values that start with the listed prefix. Here we're searching for any links that start with http://, which is an easy way to target absolute links. By changing the caret to a dollar sign, we target a suffix rather than a prefix. So in this case, we would be targeting any link to a PDF file. Finally, by adding asterisk prior to the equal sign, we match any attribute value that contains the string value.
In this case, any element with an id that contained main would be targeted. That's worth noting here that CSS is case sensitive. As far as browser support goes, attribute selectors are pretty widely supported. So, you should be able to start using them right now. As you can see, even the CSS3 additions to attributor selectors are pretty widely supported. If you are new to attribute selectors, I am guessing you can't wait to try them out. So in our next exercise we're going to use them to filter through page elements and apply precise styling.
Find answers to the most frequently asked questions about CSS3 First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.