Menu
I was drafting a quick test of how styling works in nested lists in HTML and CSS. I was trying to showcase how the child selector works in difference to the general decendant selector (don't know if that's the correct term) ul li, vs ul > li.
But when I put color red on ul > li, then ONLY the child li in the ul SHOULD get red colored text, but turns out that all text in ul inherits that color. Could someone be so kind and explain to me why this happens with only text properties, for example color, text-align and text-decoration. While properties like background-color and border doesn't get passed down to the grandchildren (as it correctly should work with > selector). Or just send me a link to somewhere where this is explained!
Thanks in advance!
ul {
background-color: red;
}
ul li {
background-color: green;
}
ul>li {
background-color: blue;
color: red;
text-align: center;
}
ul>li>ol {
background-color: pink;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
<link href="styles.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
</head>
<body>
<div>
<ul>
Unsorted List
<li>
First Items In Unordered List
<ol>
First Ordered List
<li>First Ordered Item</li>
<li>Second Ordered Item</li>
<li>Third Ordered Item</li>
</ol>
</li>
<li>
Second Item In Unordered List
<ol>
Second Ordered List
<li>First Ordered Item</li>
<li>Second Ordered Item</li>
<li>Third Ordered Item</li>
</ol>
</li>
<li>
Third Item In Unordered List
<ol>
Third Ordered List
<li>First Ordered Item</li>
<li>Second Ordered Item</li>
<li>Third Ordered Item</li>
</ol>
</li>
</ul>
</div>
</body>
<script src="script.js"></script>
</html>
818
Inheritance in CSS occurs when an inheritable property is not set on an element. It goes up in its parent chain to set the property value to its parent value. CSS properties such as height , width , border , margin , padding , etc. are not inherited.
In CSS, inheritance controls what happens when no value is specified for a property on an element. CSS properties can be categorized in two types: inherited properties, which by default are set to the computed value of the parent element.
ul stands for unordered list. li stands for list item. They are the HTML tags for "bulleted" lists as opposed to "numbered" lists (which are specified by ol for ordered list).
Properties are inherited when they have the value inherit.
The default stylesheets provided by browsers have inherit as the default value for properties where it would generally be considered useful.
It is useful that given:
<p style="color: blue">The quick <em>brown</em> fox jumped over the lazy dog.</p>
… the em element inherits the colour instead of forcing you to respecify it.
It isn't useful for a background to be inherited because that would layer over the top of the previous one. A background image would restart on the em element while a translucent background colour would multiply the opacity of its parent.
73
Let's divide your question into 2 parts,
ul > li means?For CSS color property, it doesn't mean the first children of ul only, it also means some elements & their properties inside the children unless you set different color for them, for example-
<style>
ul > li {
color: red;
}
</style>
<ul>
<li>HOME</li>
<li> MY ROOMS
<ul>
<li>BED ROOM</li>
<li>KITCHEN</li>
</ul>
</li>
<li>GARDEN</li>
</ul>The color: red; is applied not only to ul > li but also to ul > li > ul > li. Now, if you set a different color for them, then they will not inherit the color from ul > li anymore, see the example below-
<style>
ul > li {
color: red;
}
ul > li li {
color: green;
border-width: 1px;
border-style: solid;
}
</style>
<ul>
<li>HOME</li>
<li> MY ROOMS
<ul>
<li>BED ROOM</li>
<li>KITCHEN</li>
</ul>
</li>
<li>GARDEN</li>
</ul>As you can see the child list items color is different now. You can also see the border around them and their color, here comes the second part of your question-
color property applicable to text only?The answer is NO, if CSS color property is applied to an element, it means it's also applied to the following properties of following children of that element-
alt attribute (of img tag which is a child of that element)border-color of ul, ol & li (which are children of that element)list-style-type color of li (which is a child of that element)Now, see the example below-
<style>
div {
width: 400px;
margin: 20px auto;
/* color */
color: green
}
ol li,
ul {
border-width: 1px;
border-style: solid;
}
</style>
<div>
<img src="01.jpg" alt="This is a missing img tag">
<br>
<br>
<ul>
<li>Lorem, ipsum dolor.</li>
</ul>
<br>
<ol>
<li>Lorem ipsum dolor sit.</li>
</ol>
</div>I have learned this from some tutorial I forgot but after some googling I found an article that could be more useful for you, and this is a w3school page you can learn more about CSS selectors from here, good luck.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
