does child combinator (>) css affects sibling elements?
Question
Below is my HTML
<ul>
<li>title1
<ul>
<li>subtitle1.1</li>
<li>subtitle1.2</li>
</ul>
</li>
<li>title2
<ul>
<li>subtitle2.1</li>
<li>subtitle2.2</li>
</ul>
</li>
</ul>
And here is CSS
ul > li {
color: red;
}
I was expecting only title1 and title2 to be in red. But all sibling elements ie subtitlle1.1 , subtitlle1.2 , subtitlle2.1 , subtitlle2.2 became red.
Child combinator should affect child only, but siblings here are inheriting top child's property. Could you please elaborate more on what is going behinf scene? And what css should look like if i want only title part above to be in red?
3 answers
solution1
4 ACCPTED 2013-02-09 14:33:58
The style applies to the subtitles too, not because they are inside the outer list, but because they are immediate children of their own lists.
With the markup given, and no other information, there is no selector that can target only the first level of lists.
If you know that the list is inside another element, you can use the immediate child combinator to target the outer lists:
div > ul > li {
color: red;
}
You can override the style for the inner lists:
ul > li {
color: red;
}
ul > li > ul> li {
color: black;
}
If you can add an id or a class to the outer list, you can use that to target it, and it won't apply to the inner lists because they don't have that id or class:
.myList > li {
color: red;
}
solution2
1 2013-02-09 14:59:36
Behind the Scene
This is due to the fact that the color property is inherited by default . So if you define a color on the top element (say <body> ) it will apply to all children that don't override this property. This is essential to the cascading mechanism central to CSS .
Solutions
To solve your problem you can either :
HTML solution: Add more semantic
First, wrap you text into a tag with (maybe add a class attribute) :
<ul>
<li><span class="term">title1</span>
...
</li>
...
</ul>
Then define the color :
ul > li > span,
ul .term {
color: red; # only apply to the span
}
- pro: add semantic and use CSS more efficiently ;
- cons: the use of unsorted list (
<ul>) is not really adapted. I'll recommend to use definition list (<dl>).
CSS solution: Override the property
You can simply force the subtitle to use whatever color you want :
ul > li > ul > li {
color: black; # back to default document color
}
- pro: CSS only ;
- cons: add extra rules, less readability.
solution3
0 2013-02-09 14:36:28
I would add a tag wrapper for the title and style it this way:
<ul>
<li><span>title1</span>
<ul>
<li>subtitle1.1</li>
<li>subtitle1.2</li>
</ul>
</li>
<li><span>title2</span>
<ul>
<li>subtitle2.1</li>
<li>subtitle2.2</li>
</ul>
</li>
</ul>
And you CSS in this case would be:
ul > li > span {
color: red;
}
This way only title1 and title2 would end up in red.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.