Ioan Ioan - 16 days ago 4
CSS Question

Change the style of a tag that is only in wanted elements

So i have a page like this :

<body>
<ul>
<li><span class="first">First</span></li>
<li><span class="second">Second</span></li>
<li><span class="third">Third</span></li>
<li><span class="fourth">Fourth</span></li>
</ul>
</body>


I want to change the style of the "li" tags that are only in the first and the second span.

I tried this
.first,.second li{margin-left:10px;}
, but it didn't work.

Answer

The comma needs to separate COMPLETE element paths:

.first  li, .second li
{margin-left:10px;}

I've wasted enough time explaining why I didn't mention your improper formatting that I might as well correct you on it at this point;

<body>
    <ul>
        <li class="first">First</li>
        <li class="second">Second</li>
        <li class="third">Third</li>
        <li class="fourth">Fourth</li>
    </ul>
</body>

CSS:

li.first, li.second {
    margin-left:10px;
}

If we're really going to travel down this rabbit hole and teach code, might as well mention this can be done entirely without classes:

ul li:nth-child(1), ul li:nth-child(2)
{
    margin-left:10px;
}