RSS
CSS Videos
By Ashton Sanders

CSS Properties

CSS Selectors Part 2

StupidMehOkayGreatAwesome!
(121 votes, avg: 4.31/5)
Loading ... Loading ...

Video Transcript:

Hi this is Ashton Sanders with CSS Videos.com and this is the second video about CSS Selectors. In CSS Selectors Part 1, we covered how you can use HTML tags, ID‘s and Classes to select what to apply your CSS to.

In this video we’ll talk about

  1. Applying the same CSS to multiple elements.
  2. Using HTML’s hierarchy to be more specific about what elements are selected.

Selecting Multiple Elements at Once

To select two separate elements at the same time and apply the same styling to each, normally you’d write it as this:

h1 { color: red;}
h2 { color: red;}

Or you can use a comma to separate the selectors and put them together like this:

h1, h2  { color: red;}

Nope, not very complicated at all. This line of CSS will make all <h1> and <h2> tags red. You can apply the same styles to as many selectors as you want. There’s no limit.

h1, h2, #item, .red   { color: red;}

In this line of CSS, we have applied the same styling to four different selectors. All <h1> tags, <h2> tags, elements with the id=”item” and class=”red”.

CSS Descendant Selector

Of the CSS Basics, I probably use the CSS Descendant Selector the most. This is wher eyou use the hierarchy of your HTML to define which elements get “styled” (as opposed to assigning classes to everything. To quickly define hierarchy, here is some simple HTML:

<body>
<div>
<p>Random Text</p>
</div>
<p>More Text</p>
</body>

We have two paragraphs (<p>) in this HTML. The only difference between them is that one is the “child” of a <div> and the other is not. It can also be said that the <div> is the “parent” of the <p>, just like how the <body> is the “grandparent” of the first paragraph and the  “parent” of the second paragraph. A simpler way to say this is: the <body> is an “ancestor” (parent, grandparent, etc.) of both paragraphs. We can use these relationships in our CSS Selectors.

Let’s use CSS to only change the color of all paragraphs with a div as an ancestor:

div p { color: red;}

Yes, it’s that simple. The space represents ancestory.

body p { color: red;}

This CSS would make both paragraphs red since both paragraphs  are a descendants (child, grandchild, etc.) of the <body> tag.

Note: There are more ways to use your HTML hierarchy in your CSS Selectors (like only direct, siblings, etc.) but as they don’t work in all browsers in use today *cough* IE6 *cough*… I won’t go into them in detail here.

That pretty well summarizes what you  can do with CSS Selectors!

The next video will talk about the three ways of including your Cascading Style Sheets into an HTML document.

Thanks for watching and rating.

This entry was posted by Ashton Sanders on Monday, June 1st, 2009 at 4:25 pm and is filed under CSS Basics. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

22 Responses to “CSS Selectors Part 2”

  1. Anthony Porter says:

    This is a great series so far. The video about CSS Selectors Part 2 stops about halfway, though. I’ll try again later.

    • Ashton Sanders says:

      Hi Anthony,

      Thanks for the note. I have corrected/updated the video file. It should now play all the way through. (I also corrected the timing and video size.)

      Thanks!

  2. Lisa Miller says:

    These are great Ashton…..can’t wait for more!

  3. Patrick says:

    Have you stopped these? Over a month and no new videos?

    • Ashton Sanders says:

      Hey Patrick,

      Nope, I’m about 75% done with the next one. It should be up this week. Work just got hectic… always getting in the way of the important stuff. =/

      Check back soon,
      Ashton

  4. Sathyendra Pai says:

    Dear Sir,

    I am waiting for the next video.

  5. Brian says:

    Hi

    Just came accross your videos and find them very good. I am new to web design etc, so all such videos are helpful.

    Are there only the 5 ‘CSS Basics’ so far ?

    thanks !

  6. Jill says:

    With reference to my other comment on the preceding video, you’ve done this again, introducing & using a term, without any explanation as to what is a div?!! Which site would you recommend that beginners go to for REAL basic css information before coming to yours?

    • Ashton Sanders says:

      A <div> is an HTML element.

      Actually, it sounds like you need to learn a little bit of HTML before trying to learn CSS. Here’s a nice simple text tutorial on HTML: http://www.w3schools.com/html/ I’ll add a little clarification to that on the home page.

  7. jill says:

    Actually i have learnt the very basics of html but i just can’t get my head around what purpose a div serves, isn’t even in html, sorry, other than that, i know these videos will help a lot of people.

    • Ashton Sanders says:

      No Problem.

      A div tag stands for “division.” It is used a lot with CSS because it doesn’t have a lot of default characteristics, and so can be used to format the layout of a page without much additional code.

  8. Jeremy says:

    Been a while any idea when we can expect another video?

    • Ashton Sanders says:

      Hi Jeremy,

      I don’t have an ETA at the moment =(. I’ve already started it, but I am currently upgrading my video capturing and editing software so I can get more detailed videos of actually working with the CSS attributes.

      You can subscribe to the feed, and it will let you know when the next one comes out.

  9. david says:

    I think it would be better having the videos with live examples, what do i mean? ex. having u doing all this code in your text editor n showing the content on the browser, in that way we can have a better idea how does it works, instead of having a blank space with some text on it.

    Another idea why u don’t create users in your site, maybe we can help you out.? besides that i think u explain this better than other web tutorials, simple and clean!!!

  10. Asgeir says:

    You are a guru man. A real teacher. So simple and easy to learn. And fun. Thanks for sharing and keep up the good work.

  11. Isil says:

    I would like to thank you so much for putting this highly beneficial staff together..It’s such a great way to learn CSS.

  12. Isil says:

    I will share your website in my facebook account.

  13. Robert Kennedy says:

    Yeah the decedent ancestor parent thing was something that took me a while to get use to. ^$&#! Microsoft -ahem!

  14. Karim says:

    Hi Ashton,

    I have watched all your videos in one sitting! That’s how much I enjoyed the tutorials. One or two important points that I would like to highlight: your voice is just nice for recording of this nature – I wish I had that kind of voice…another important point is the speed of narration — I hope you can keep it this way (again, just nice). I found that the problem with some video tutorials (even from commercial one) the instructor speaks very fast. Of course the viewer can always ‘rewind’ but it’s not always convenient to do that every time.

  15. angel says:

    simple and clear.
    good job.
    thank you

  16. Antonio says:

    Hello are you planning to do three part. Because I would like to know about to combine selectors in more complex documents.

    Great Video!!!

  17. Cyan says:

    Thanks for good videos!
    I like coughing in this video haha 🙂

Leave a Reply

 
 
.love { css: awesome }