Require Some CSS Help

While reading some CSS scripts, I found out that many times the selector comes after the class. For example:

.something ul li {
blah;
blah;
}
What does this mean? I mean to ask that it's understandable that selectors come before the class which means that it relates to a particular class. So what does the above syntax (where class comes before the selector) mean?

 

elements spaced apart like that means "child of"... Best way to explain that is visually.

Take this piece of code... I'm going to color code it so you see which ones each CSS line points at.

[COLOR="#0000ff"]<ul class="something">[/COLOR]
	[COLOR="#008888"]<li>[/COLOR]
		<a href="#">Menu Item</a>
		[COLOR="#FF0000"]<ul>[/COLOR]
			[COLOR="#880088"]<li>SubItem</li>[/COLOR]
		</ul>
	</li>
</ul>

Code (markup):

.something
.something li
.something ul
.something ul li

It's worth pointing out that .something li points at both that first LI, and the second li as well since both are 'child' elements of the topmost ul.something

It's why whenever I see this asshattery:

<ul class="menu">
	<li class="menuItem"><a href="#" class="menuAnchor">Test Item</a></li>
	<li class="menuItem"><a href="#" class="menuAnchor">Test Item</a></li>
	<li class="menuItem"><a href="#" class="menuAnchor">Test Item</a></li>
	<li class="menuItem"><a href="#" class="menuAnchor">Test Item</a></li>
	<li class="menuItem"><a href="#" class="menuAnchor">Test Item</a></li>
	<li class="menuItem"><a href="#" class="menuAnchor">Test Item</a></li>
</ul>

Code (markup):

I feel the overwhelming urge to punch someone in the face since they have failed to grasp the basics of HTML/CSS. Classes should be used when things are different, not when they are the same. You have all the li getting the same class you don't need a class since you can hook off it's parent... if all the anchors are getting the same class you don't need a class since you can hook off it's parent.

All that's needed is the class on the parent.

<ul class="menu">
	<li><a href="#">Test Item</a></li>
	<li><a href="#">Test Item</a></li>
	<li><a href="#">Test Item</a></li>
	<li><a href="#">Test Item</a></li>
	<li><a href="#">Test Item</a></li>
	<li><a href="#">Test Item</a></li>
</ul>

Code (markup):

because then... what was ".menuItem" in the original becomes ".menu li" and what was ".menuAnchor" becomes ".menu a". Just as George Carlin said not every ejaculation deserves a name, not every element needs a class to receive styling... (or a extra div around it for no good reason)

That help explain it?

 

yeah that really helped. Thanks for posting.