CSS CSS Selectors Going Further with Attribute Selectors and Pseudo-Classes :only-child and :empty

Jake Almendarez
seal-mask
.a{fill-rule:evenodd;}techdegree
Jake Almendarez
Front End Web Development Techdegree Student 4,190 Points

for some reason the font size is still applied to all the elements even if after i add h1 and span tags.

for some reason the font size is still applied to all the elements even if after i add h1 and span tags. Is it because the html inherited the font size?

Gergely Bocz
Gergely Bocz
Treehouse Moderator 10,648 Points

Alright, so it took me some time to think it through and thanks to Steven giving me a lead, i figured out what's happening.

As Steven mentioned font-size is an inherited property which means, that unless given a defined value, the children and all other descendants of the selected element will inherit their parent and the "oldest ancestor's" defined font-size.

In this case, even though the li items, ul and h1 elements have siblings, and are therefore not affected by the :only-child selector, they have the body (and even html) as their ancestors which are in fact affected by the :only-child selector, so all their descendants inherit the font-size from them.

If you want to see for yourself that this is indeed about inheritance, you can copy the code below and see for yourself what happens if there is a font-size value defined separately for the li items or if there isn't. For clarity's sake i changed the em values to px values, because em is a value relative to its closest parent and therefore defining a font-size for the li elements would make grow (if em > 1) or shrink(if em < 1) relative to their parent instead of having a separately defined, concrete font-size. Hope it makes sense!

/* Structural Pseudo-classes------------------ */

li:first-child { background: #52bab3; color: white; }

li:last-child { border: none; }

:only-child{ color: #52bab3; font-size: 32px; }

li{ /* font-size: 16px; */ }

Gergely Bocz
Gergely Bocz
Treehouse Moderator 10,648 Points

Hi Gertjan!

There have been some changes to :only-child's functionality since its inception. I suggest you checking out Andren's comment regarding it here. If you find his insights useful, please consider upvoting his comment.

2 Answers

Steven Parker
Steven Parker
201,976 Points

Yes, "font-size" is an inherited property. The MDN pages, like this one for font-size, have a "Specifications" box that will include whether or not the property is inherited.

Gergely Bocz
MOD
Gergely Bocz
Treehouse Moderator 10,648 Points

Hi Jake!

Can you share your code so that i can see what you did?

My guess is, that you put the h1 and the span tags to the wrong place. For example if you put the h1 tag after the ul, along with the *li list items, then it became their sibling, so they share a common parent, therefore the body still has only 1 "direct child", as the h1 would be a grandchildren of the body, along with the li elements.

So the :only-child selector selects those elements, that don't have a sibling: a node with which our selected element shares a parent. If such a node exists, then they are not selected by the :only-child selector.

Hope it helps! If I didn't answer your question, please share your code so that i can take a look!

Gergö

Jake Almendarez
seal-mask
.a{fill-rule:evenodd;}techdegree
Jake Almendarez
Front End Web Development Techdegree Student 4,190 Points

The way the code is here shouldn't allow the :only-child rule to work because the ul isn't the only child anymore after adding the h1, but if you delete the font size property in the :only-child rule the font-size goes down. when it should've gone down after adding the h1 and saving and refreshing. How or why is this happening? I really hope this makes sense...Thanks for reading

HTML <!DOCTYPE html> <html> <head> <title>Selectors</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css"> <style> body { font-family: 'Nunito', sans-serif; color: #616161; padding: 40px 0; } h1 { text-align: center; } ul { list-style: none; width: 50%; margin: auto; } li { border-bottom: 1px dotted #40918c; padding: 15px 10px; } </style> </head> <body> <h1>My List Of Items</h1> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> <li>Item 10</li> </ul> </body> </html>

``` Css /* Structural Pseudo-classes------------------ */

li:first-child{ background:#52bab3; color:white; }

li:last-child{ border-bottom: none; }

:only-child { color:#52bab3; font-size:1.5em;

}

Gertjan Van der Toorn
seal-mask
.a{fill-rule:evenodd;}techdegree
Gertjan Van der Toorn
Front End Web Development Techdegree Student 7,289 Points

Hi, I had the same thing happening and didn't understand why. I understand the explanation since I also noticed in the developer tools the 1.5em was inherited from html tag. But then why does it not happen in the video, since it should be the same code we are working with as in the video?