CSS general element takes precedence over classes? - html

Question

ul {
width: 250px;
}
li {
margin: 10px;
}
ul.illuminations {
list-style-position: outside;
}
ul.season {
list-style-position: inside;
}
ul.2 {
list-style: inside circle;
width: 300px;
}
li.3 {
margin: 100px;
}
<ul class="illuminations">
<li>That idol, black eyes and yellow mop, without parentsw our court ...</li>
<li>Gracious son of Pan! Around your forehead crowned with flowerets ...</li>
<li>When the world is reduced to a single dark wood for our four...</li>
</ul>
<hr />
<ul class="season">
<li>Once, if my memory serves me well, my life was a banquet...</li>
<li>Hadn't I once a youth that was lovely, heroic, and fabulous...</li>
<li>Autumn already! - But why regret the everlasting sun if we are</li>
</ul>
<hr />
<h1>Quotes from Edgar Allan Poe</h1>
<ul class="2">
<li class="3">I have great faith in fools; self-confidence my friends call it.</li>
<li class="3">All that we see or seem is but a dream within a dream.</li>
<li class="3">I would define, in brief, the poetry of words as the rhythmical creation of beauty.</li>
</ul>
The first two lists do acquire the different marker positions. However, the last list doesn't acquire the list style and width attributes that I intend it to by using the more specific declarations. This is a problem I've encountered many times now. Why is this and how am I supposed to target specific elements in order to override attributes?

Answer 1

CSS identifiers can't begin with a digit. So .2 and .3 are invalid selectors. You can escape them as .\32 and .\33.
ul {
width: 250px;
}
li {
margin: 10px;
}
ul.\32 {
list-style: inside circle;
width: 300px;
}
li.\33 {
margin: 100px;
}
<ul class="2">
<li class="3">I have great faith in fools; self-confidence my friends call it.</li>
<li class="3">All that we see or seem is but a dream within a dream.</li>
<li class="3">I would define, in brief, the poetry of words as the rhythmical creation of beauty.</li>
</ul>