Hide div and show it when target - css

Question

I have this in my html:
<div>
<ul id="tabs">
<li id="h1">
Home
<div>
text here
</div>
</li>
<li id="h2">
Services
<div>
text here
</div>
</li>
</ul>
</div>
What I want to do is make the list items inline, while hiding their contents. And the contents would only be visible when I press the list item link. This is what I've tried so far on the css:
li {
display: inline;
}
li div {
display: none;
}
li:target {
display: block;
}
However, this doest not work. The display: block; is not overriding the display: none;
Thanks in advance!

Answer 1

li:target only refers to the li element itself that is targeted. Setting that li’s display property to block will not affect the containing div which display property is set to none. In fact, it will only overwrite the display: inline that’s defined on li.
When you want to display the div that’s inside the targeted li element, then you need to adjust the selector to actually match that div. For example using li:target div to match the specificity of the original rule:
li {
display: inline;
}
li div {
display: none;
}
li:target div {
display: block;
}
<div>
<ul id="tabs">
<li id="h1">
Home
<div>
text here
</div>
</li>
<li id="h2">
Services
<div>
text here 2
</div>
</li>
</ul>
</div>