Descendant Selectors in CSS

Transcript

Hello. You are back.

In the last lesson we learned what a descendant was. Now let's talk about descendant selectors. 

A descendant selector allows you to select tags and style them, but only when they are descendants - meaning they're inside of a specific tag. For example, I have used the descendant selector to make the paragraphs in my header bigger than the other paragraphs on my page. 

To code a descendant selector, first select the tag you want to look inside. I want to look inside my header. This is followed by a space and the descendant you're looking for.  I'm looking to select paragraphs. I made the font for the paragraph inside the header 26 pixels, because it's my welcome message, and I want it to draw my users’ attention. The rest of my paragraphs use an 18 pixel font. 

Hold on a second, though. How does that work?  The paragraph in the header is selected by the p type selector and the descendant selector.  But, these selectors have two different font size values. How does the browser know which font size to give the paragraph in my header? 

Well, if two different selectors try to change the same property on the same tag, the browser will always use the style from the more specific selector.  The descendant selector uses two tags, the type selector uses one. So the descendant selector styles the p tag in my header. 

Did you notice that my descendant selector doesn't have a declaration with the line height property?. That means the paragraph in my header will use the line height from the type selector. If the header p descendant selector did have a line height declaration, then my paragraph and the header would use the line height from the descendant selector, not the type selector.

Here, I'm also adding a few more properties to my header p descendant selector. Of course, these won't be applied to any of the paragraphs outside of the header because they aren't descendants of the header.

That wraps up Descendant Selectors. 

Lets move on to the next lesson!