CODEWITHSUNDEEP
csscss-selectors
thoni56
thoni56

Reputation: 3335

What does .class-name mean as a CSS selector?

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?

Upvotes: 4

Views: 6626

Answers (8)

Texx Smith
Texx Smith

Reputation: 1

Just skip using selectors in most cases. It makes the css easier to write read and use. also your programmer. Yes you can use them to apply CSS but that what classes are for the ID is for scripts to find elements and replace them or other programs to retrive info from them etc.

You can really screw things up, now or in the future by using the id's for CSS.

Upvotes: 0

zombat
zombat

Reputation: 94147

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".

Upvotes: 4

heisenberg
heisenberg

Reputation: 9759

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

Upvotes: 1

Chuck
Chuck

Reputation: 237010

.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.

Upvotes: 2

James Curran
James Curran

Reputation: 103485

.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'"

Upvotes: 7

ScottS
ScottS

Reputation: 72261

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.

Upvotes: 2

Jason McCreary
Jason McCreary

Reputation: 72961

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

Upvotes: 1

meder omuraliev
meder omuraliev

Reputation: 186562

#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

Upvotes: 3

Related Questions