What is wrong with the following way of trying to apply a modifier ('active') to one specific element in a list? This is part of a nested sortable list whose branches as well as nodes are sortable and require the sortitem class. In the example the first 'X' should be highlighted with orange but it is not. I would expect CSS not to be confused by this, or is it? There is definitely something to learn for me here ...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.class-0 {
position: absolute;
background: rgba(85, 85, 85, 0.80);
left: 0.5%;
top: 1%;
height: 98%;
width: 26%;
}
.class-0 .sortitem {
font-size: 33px;
line-height: 1.3;
margin-right: 10px;
display: inline-block;
}
.class-0 .sortitem .bt {
background: #55f;
font-size: 29px;
}
.class-0 .sortitem .bt .active{
background: #ff9b00;
}
</style>
</head>
<body>
<span class="class-0">
<span class="sortitem">
<span class="sortcont">
<span class="sortitem bt active"><span>X</span></span>
<span class="sortitem bt"><span>X</span></span>
<span class="sortitem bt"><span>X</span></span>
</span>
</span>
</span>
</body>
</html>Remove the space between the .bt and .active
.class-0 .sortitem .bt.active{
background: #ff9b00;
}
By removing the space between the two class selectors, you are applying the style to elements with both .bt and .active classes. With the space between them, you are applying the style to elements with the .active class that are inside the elements with the .bt class.