Start learning with our library of video tutorials taught by experts. Get started

CSS Web Site Design

Descendant selectors


From:

CSS Web Site Design

with Eric Meyer

Video: Descendant selectors

Now it's time to get a little bit more complicated with selectors, which is what we're going to do in this movie. But what we need to do first is take a moment and consider the structure of the document, which you can see here is markup from our Javaco example and an XHTML document of course has a number of elements, some of which contain others. The HTML element, for example contains all the other elements. The head element, as we can see here, contains the title link and style elements. The body has everything else really, the divs and the a, and the lists and the list items, and the paragraphs and all that other stuff.
Expand all | Collapse all
  1. 14m 34s
    1. Welcome
      28s
    2. What is CSS?
      5m 34s
    3. Design tour
      2m 38s
    4. Using the exercise files
      1m 20s
    5. Installing the Web Developer toolbar
      4m 34s
  2. 25m 56s
    1. XHTML essentials
      3m 55s
    2. CSS essentials
      5m 17s
    3. Embedded style sheets
      2m 20s
    4. Linking a style sheet
      2m 19s
    5. Linking to multiple style sheets
      2m 20s
    6. Using linked and embedded style sheets together
      4m 21s
    7. Using imported style sheets
      5m 24s
  3. 57m 48s
    1. ID selector essentials
      6m 38s
    2. Class selector essentials
      4m 9s
    3. Best practices for classes
      4m 52s
    4. Grouped selection
      4m 2s
    5. Descendant selectors
      6m 44s
    6. The sources of style
      6m 38s
    7. Specificity
      8m 21s
    8. Making things important
      4m 32s
    9. Inheritance essentials
      5m 12s
    10. Making things really unstyled
      4m 2s
    11. User style sheets
      2m 38s
  4. 39m 3s
    1. Box model essentials
      7m 35s
    2. Simple floating
      5m 3s
    3. Using float for layout
      5m 5s
    4. Fixing column drop
      5m 35s
    5. Clearing essentials
      4m 20s
    6. Float containment
      6m 35s
    7. Creating a navbar from a list
      4m 50s
  5. 38m 3s
    1. Coloring text
      4m 13s
    2. Defining color in CSS
      8m 12s
    3. Coloring backgrounds
      6m 35s
    4. Applying background images
      4m 19s
    5. Manipulating the direction of background images
      2m 52s
    6. Positioning backgrounds
      7m 23s
    7. Background shorthand
      4m 29s
  6. 58m 28s
    1. Altering line height
      7m 32s
    2. Font style and weight
      5m 45s
    3. Sizing fonts
      9m 59s
    4. Using font families
      10m 38s
    5. Font shorthand
      6m 5s
    6. Justifying text
      4m 56s
    7. Vertically aligning text
      4m 22s
    8. Transforming text
      3m 49s
    9. Text decoration
      5m 22s
  7. 44m 40s
    1. Margin essentials
      14m 21s
    2. Adding borders
      6m 52s
    3. Padding
      9m 17s
    4. Using negative margins
      7m 19s
    5. Margin collapsing
      6m 51s
  8. 20m 38s
    1. Styling tables and captions
      5m 23s
    2. Styling table cells
      6m 30s
    3. Styling a column with classes
      4m 51s
    4. Styling links inside table cells
      3m 54s
  9. 30m 40s
    1. Styling for specific mediums
      4m 3s
    2. Creating a print style sheet
      6m 35s
    3. Hiding layout for print
      4m 11s
    4. Styling for print
      6m 34s
    5. Complex styling for print
      4m 37s
    6. Creating a footer
      4m 40s
  10. 37m 23s
    1. Getting started
      1m 11s
    2. Setting global styles
      4m 4s
    3. Defining masthead and navbar colors
      3m 27s
    4. Layout of the navlink bar
      3m 38s
    5. Using columns
      4m 49s
    6. Setting content styles
      1m 53s
    7. Creating the sidebar boxes
      5m 42s
    8. Creating the sidebar form
      3m 23s
    9. Completing the sidebar
      3m 29s
    10. Making a table
      3m 12s
    11. Creating a footer
      2m 35s
  11. 1m 28s
    1. Goodbye
      1m 28s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
CSS Web Site Design
6h 8m Intermediate Sep 12, 2006

Viewers: in countries Watching now:

CSS gives Web designers control over the appearance of their web sites by separating the visual presentation from the content. It lets them easily make minor changes to a site or perform a complete overhaul of the design. In CSS Web Site Design, instructor and leading industry expert Eric Meyer reviews the essentials of CSS, including selectors, the cascade, and inheritance. The training also covers how to build effective navigation, how to lay out pages, and how to work with typography, colors, backgrounds, and white space. Using a project-based approach, Eric walks through the process of creating a Web page, while teaching the essentials of CSS along the way. By the end of the training, viewers will have the tools to master professional site design. Exercise files accompany the training videos.

Subjects:
Web Web Design
Software:
CSS
Author:
Eric Meyer

Descendant selectors

Now it's time to get a little bit more complicated with selectors, which is what we're going to do in this movie. But what we need to do first is take a moment and consider the structure of the document, which you can see here is markup from our Javaco example and an XHTML document of course has a number of elements, some of which contain others. The HTML element, for example contains all the other elements. The head element, as we can see here, contains the title link and style elements. The body has everything else really, the divs and the a, and the lists and the list items, and the paragraphs and all that other stuff.

All of these are connected in parent, child relationships. Most elements have either a child or a parent or both. The HTML element, to pick an example, has two children, the head and the body and the head element has three children, title, link and style. The body has four children, those are the divs, like the masthead div, the content div, the sidebar div, the footer div and each of those divs have children as well. Basically one element is the child of another if you can go down one step here, so from head to title or from body to div masthead. The image inside the masthead div is not a child of the body. It's the descendent of the body. Conversely, the body is not the parent of the IMG, is an ancestor of the IMG element.

The div, that's the masthead div, that is a child of the body and the body is its parent. So, as you can tell from that, an element can have many ancestors, but it can have only one parent, and most elements can have many children. There are few elements like IMG, that can't have children. There's no such thing as a child element for an IMG element, an image can have a parent and it can have ancestors but it can't have any children or descendents, but the body as, for example has just a whole tone of descendents and children are also descendents.

The masthead div here is a descendent of the body but it is also a more specific kind of descendent called a child of the body. The relationships between these connections should be drawn as a tree. It's kind of an upside down tree, with the HTML element at the top and then all of the descendent elements coming down from it. So, visually we might think of it more like a root system, but it's still a tree. This can help us visualize how we could write descendent selectors, where we can select elements that are descended from other elements. So, considering an example where we want a style, all of the links that are inside of ordered lists so in that case we would write the selector ol space a, and that space between the two element names, indicates a descendent relationship not a child relationship but a descendent relationship and what this does, we can read it backwards and say that this selects all a elements that are descended from ol elements. Any other a elements, those a elements that are not descendent from ol elements, are excluded form the selector, they're not matched by this particular selector. So we can use this tree to find the various relationships the parent-child and ancestor descendent relationships and it's one way of visualizing how to create your descendent relationships.

So for example let's say that we want to select paragraphs inside the masthead and make them italicized. So we go to our code, we can say masthead space p, font-style italic and if we hit Reload the July 16, 2006 is now italicized but since it's the only p element that descends from masthead ID div, it's the only one that's italicized. All the other paragraphs throughout this document are not going to be selected here. We might want to do the same thing with the sidebar, so let's say sidebar p style italic, and now paragraphs that are descending from the element with an ID of sidebar will be italicized. So if you look over to the sidebar there and hit Reload we have italicized text. Now, of course, we can group these together so that instead of saying masthead p, font- style italic, sidebar p font-style italic, just put a comma between the two descendent selectors and so we have two descendent selectors that are grouped together and any paragraph that descends from the masthead or any paragraph that descends from the sidebar, italicize them, and then we might do some other treatment for paragraphs descending from the content div of something like font-weight bold and hit Reload and there we go. This is why, this is why, you have to be careful when you write element ID combinations like div with an ID of content.

You'll notice I put a space here, and that would by mistake, in effect, this would be any paragraph element that descends from an element with an ID of content, and that element descends from a div, make them bold and if we go back and hit Reload, we'll discover that that's not working because there is no div element that's an ancestor to the content div, and the space between div and the content ID descriptor creates that descendent relationship.

If I get rid of it, now I'm saying any development that has an ID of content. So, in this case any paragraph that descends from a div element, where that div element has an ID of content make the font-weight bold and there it works. So that's why you have to be careful both with IDs and classes, that you don't accidentally put a space between an element descriptor and the ID or class descriptor, unless you really do mean something like I want a paragraph that descends from an element with an ID of content, where that element itself descends from a div, which as we saw won't work here, all we want is this one instead.

There are currently no FAQs about CSS Web Site Design.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS Web Site Design.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked