Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jake Almendarez
Front End Web Development Techdegree Student 4,250 Pointsfor 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
14,244 PointsHi 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
231,275 PointsYes, "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
14,244 PointsHi 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
Front End Web Development Techdegree Student 4,250 PointsThe 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
Front End Web Development Techdegree Graduate 15,891 PointsHi, 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?
Gergely Bocz
14,244 PointsGergely Bocz
14,244 PointsAlright, 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; */ }