Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In many cases, CSS allows us to tweak our syntax slightly to achieve more focused targeting goals. When writing class and ID selectors you can also make them element-specific, meaning they will only apply when those attributes are applied to a specific element type. To maybe make more sense if that, I have got a page here opened in the browser, and this is the element-specific.htm, which is found in the 02_06/Chapter_02 directory, and it's exactly what we had in our last lesson for the most part.
We have all of these artists targeted with a class attribute of artist, and then they are being styled with a class selector of artist. But maybe we don't want them all styled exactly the same. For example, the name of the artists here in the headline probably shouldn't look exactly the same way it does in the body copy everywhere, but right now that artist selector is applying to the entire page. So let's go take a look at how we can maybe modify the selector a little bit and make it more specific. So now in my code editor here, Aptana Studio, I have the element-specific file open again.
Remember that it is in the 02_06 directory. And I just wanted to scroll down into my styles, and here I can see the artist style that we created in the last exercise. So what I am going to do is I am going to create another one directly underneath this, and here I want to use what's known as an element-specific selector. So I can say h2.artist. All right! So I am just going to open up my curly braces really quick, and before I add any styling to this, I want to talk about this a little bit, so the syntax of it.
So in this case, this selector is saying apply to any element, doesn't matter which type of element it is, but any element that has the class artist applied to it. This selector, on the other hand, is being much more specific. It's saying I only want you to add this formatting if you find an h2 with the class artist applied to it. So notice that syntax-wise there is no space between the h2 and the class selector-- they are just joined together--and the element that you are targeting comes first. Let's see if this works. So inside this selector, I am going to type in font-style, and I want to make that normal.
Underneath that, I am going to change color to black, and I am going to use a formatting property that we are going to play around with a little bit more later on called font-variant, and I'm going to make that small-caps. And that's a dash between the small and caps, so small-caps, so font-variant: small-caps. Okay, let's try this out. So I am going to save this and preview this in my browser. Now you can see that it didn't affect the styling of the other elements at all, but only when the h2 had the class applied to it do I get the text, no not italicized, using small-caps, and the color is now black, so this is exactly what I want.
Now element-specific selectors can be used for classes and IDs as well. If I go back into my code, if I wanted to, I could go to featuredArtist, and I notice that featuredArtist is currently on aside. But even though it can only be used once per page, maybe on one page there will be an article about the featured artist and in that sense, you'll be using the ID featuredArtist on articles instead of an aside, and maybe they will need to be formatted differently. So, in order to make sure that this formatting is only used for asides, I can come over right back up to my styles and I can do the exact same thing.
I can go in and just say aside# featuredArtist. And once again notice that there is no space between the element that I am targeting and the ID or class selector; they are just joined, just like that. If I save this and test it, I can see that there's no change to the formatting whatsoever, and that's because it is in aside that is targeting it. Now if I changed it to article, the selector is no longer going to work. The styling goes away because on this page, it's an aside and not an article.
So these element-specific selectors give you an incredibly powerful way to target very specific elements on the page. Now one thing that you should keep in mind, however: these selectors do require a little bit more processing work from the browser in order to target these elements, so you should really limit their use to times when they are the most efficient selector available. So don't just write a class or ID element-specific selector because the conditions for it exist on a page; limit its use to when it's the best selector for the job.
Get unlimited access to all courses for just $25/month.Become a member
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.
Your file was successfully uploaded.