So... I'm a newbie in CSS and just a moment a go I discovered something wierd! This is the code i wrote...

li.list { float: left; } ... but it did not work. If I am being to unclear let me explain.. tag.class_name is the official syntax for this type of situation! My command says that I want to change the element li that is a part of the class list so that it floats to the left of the page "viewport".

And when I changed the command to .list li { float: left; } it worked..

So my question is this.. Is this ( What I am experiencing ) somekind of a new update to css that I don't know about even tho I have been looking for answer elsewere.. or is it just for me???!

  • You seem to be misunderstanding how classes work in CSS. If .list li works, then you have applied the class to the list tag, not to the list item (<li>) tag itself. Your <li> element is not “part of” any class; it has a class applied to it. At least, it does if your HTML has <li class="list">. If you have <ul class="list"><li>...</li></ul>, then the list tag (<ul>) has a class applied to it, and the list item tag does not. – Janus Bahs Jacquet Jul 17 '17 at 12:32
  • @JanusBahsJacquet Your comment is confusing, even to a frontend web developer like myself – Zach Saucier Jul 17 '17 at 12:47
  • 1
    Please provide an example of the markup that you used. It seems you don't understand how some CSS selectors work and the differences between them because you are mixing up two completely different selections in the question – Zach Saucier Jul 17 '17 at 12:48
  • @ZachSaucier What’s confusing about it? I was trying to say more or less the same thing you did: that the two selections are completely different, and that there seems to be some confusion over which element actually has the class applied to it (viz., if the li element has the class applied to it, then li.list does work and .list li doesn’t; but if it’s the containing ul or ol element that has the class applied, then .list li works and li.listdoesn’t). – Janus Bahs Jacquet Jul 17 '17 at 12:53
  • 1
    If you've accidentally created two accounts, please see graphicdesign.stackexchange.com/help/merging-accounts to see how to get them merged into one – Zach Saucier Jul 17 '17 at 13:25

I highly suggest looking up the entry on CSS selectors on MDN and looking up a reference chart such as the one on W3 Schools. These haven't changed much since the first iteration of CSS.

By taking the example you've quoted here,

  • li.list selects all <li> elements with class="list" (.class selector)
  • .list li selects all <li> elements that are children of any element with a class="list" (element element selector)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.