Home
Username:
Password:
CSS 2/3 Tutorials

Selectors / Combinations




Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com’s entire library of video tutorials.


Learn More

Subtitles of the Movie

In this movie I talk a little bit more about using our selectors together to select specific items. In many real-world situations, we will use a combination of selectors to target specific elements that we need and want to target. So it is quite possible and normal to use an ID Selector with a Class Selector to narrow the objects to be targeted and then use Type Selectors to control those objects. So whatever our selection needs are, there will be a selector or combination of selectors that will meet those needs. So it's quite normal for us to see something like this. So here we have a combination of different selectors using our descendent order to specify the exact item that we want to affect. So this is only going to affect the emphasis tags that are inside of a paragraph that are inside of another object that has the poll quote class applied to it, which is inside of the main content ID'd area. So this is actually that's very, very specific. So this selector, with the combination of id, class and type selectors is a good example of a good practice to get into for selecting your elements because what we have here is we have general content region called Main Content and then we have something in there called Poll Quote and once we identify the Poll Quote, we've kind of specified where we want to affect our object, so there's no reason for us to go further down and specify more classes inside of that. We only need to set up a few ID's and a few classes inside of our documents. So that gets into that idea of using the structure that's there and not adding in too many classes. Now, we also have another example here. Now, of course, this is extremely bad markup but the selector would actually still select the appropriate element if the browser was able to figure this out. What we essentially have in this rule is a selector that's using our child, sibling and descendent hierarchy to select a specific item. So what this rule would do is it would select all B tags that have an emphasis sibling that's contained inside of a paragraph that's contained inside of an emphasis tag that is the direct descendent of an H2 tag. Now, that's really, really specific in terms of what hierarchy is necessary for us to select that element. So that combination is really going to give us the power that we need to select whatever it is that we need. So in the real world we see quite a few different combinations; however, hopefully they'll be better than this last example. I just wanted to demonstrate that you can select something very, very specific in whatever tag order you want. However, it would be dependent on the browser. But the nature of our selectors do give you that power. Essentially, that covers everything we need to know in order to get started using CSS Selectors. Of course, at this point our knowledge of CSS is a bit lopsided as we know a lot about our selectors but very little about our properties or values. However, at this point we should feel very confident in our ability to create appropriate selectors to meet our needs. In upcoming sections we will be talking about our properties and our values.

Tutorial Information

Course: CSS 2/3
Author: James Street
SKU: 34028
ISBN: 1-935320-64-5
Release Date: 2009-08-28
Duration: 13.5 hrs / 147 lessons
Work Files: Yes
Captions: Available on CD and Online University
Compatibility: Vista/XP/2000, OS X, Linux
QuickTime 7, Flash 8

VTC Sign up & Benefits

  • Unlimited Access
  • 98,729 Video Tutorials (23,265 free)
  • Video Available as Flash or QuickTime
  • Over 1026 Courses
  • $30 for One Month Access
  • Multi-User Discounts Available