views:

90

answers:

7

So if I have a CSS class named "class-name", what does the following mean?

.class-name {
  margin: 0;
}

And why, if I had the following HTML

<div id="some-id">
    <ul>
        <li class="class-name">
    ...

would the selector

#some-id .class-name ul li

not exist?

+3  A: 
#some-id ul li.class-name 

is prob what u need..

#some-id .class-name ul li

targets li descendants of ul descendants of the class name under #some-id

meder
+1  A: 

That selector expects a ul and li under an element with .class-name. Your HTML structure matches the following selector

#some-id ul li.class-name
Jason McCreary
+2  A: 

Because the class-name is on the li not as an element wrapping the li.

To clarify:

<div id="some-id">
   <div class="class-name">
     <ul>
       <li>

Would match the selector string you mention.

Scott
+6  A: 

.class_name means select elements with that class.

#some-id .class-name ul li means "select the li elements that are within ul elements that are within elements with the class 'class_name' that are within in the inner html of the element named 'some-id'"

James Curran
+2  A: 

.class-name specifies an element that has the class class-name. The selector #some-id .class-name ul li specifies a li that's a descendent of ul that's a descendent of some element with the class class-name that's a descendent of #some-id. To specify a particular kind of element that has the class class-name, you would do tag.class-name — for example, div.author-credit.

Chuck
+1  A: 

You've got the selector out of order, to select the li's that are "class-name" classes would be:

#some-id ul li.class-name  
kekekela
+3  A: 

The first one means what you probably think it means: Any HTML element with the class class-name will have a margin of 0 width (for each side, ie. top, bottom, left and right).

The second question is a bit more subtle. This selector

#some-id .class-name ul li

Applies only to an li that is found under a ul, found under an element with a class of class-name, found under an element with id some-id.

You would have to use a selector like this to apply to the HTML you have above:

#some-id ul li.class-name

Note that there is no space between li and .class-name in that selector. Specifying li.class-name means "an li with the class name class-name", whereas li .class-name (with a space) would mean "element with class class-name found below an li".

zombat
So, not even adding the class to the UL would help. I would need to add another level with the class. Is that right?
Thomas Nilsson
That's correct, although there are dozens of ways you could do it. A more concise way would be to add `class-name` to the `<ul>` element (and remove it from the `<li>`s), and use `#some-id ul.class-name li`. That way your HTML output would be smaller, as you'd only have `class-name` appear once on the `<ul>` instead of possibly dozens of times on the list elements.
zombat
That's a good suggestion. Makes for some cleaner HTML, it is actually the UL that should control the layout. (As my problem was with a Joomla template, I'll have to pass that on to the Joomla folks ;-)
Thomas Nilsson