Differencebetween ".Class Element" and "Element.Class"

What is the difference between .class element and element.class?

element.class selects all <element />s with that class. .class element selects all <element />s that are descendants of elements that have that class.

For example, HTML:

<div class='wrapper'>
  <div class='content'></div>
  <div></div>
  <div class='footer'></div>
</div>

For example, CSS:

div.wrapper {
  background-color: white; /* the div with wrapper class will be white */
}

.wrapper div {
  background-color: red;   /* all 3 child divs of wrapper will be red */
}

Difference between .class and .class, .class .class?

Edit: As @Robin Kanters and others have pointed out, there as a minor difference with adding the .class .class selector - specificity. (This can be seen here)

Otherwise, the .class .class selector is redundant.

.ui-widget {
     font-size: 90% !important;
}

and

.ui-widget, .ui-widget .ui-widget {
     font-size: 90% !important;
}

produce the same results.

FIDDLE

You can see in the above fiddle that the single .ui-widget selector is sufficient to produce the recursive inheritance of the font-size.

What is the difference between the selectors .class.class and .class .class?

.class .class matches any elements of class .class that are descendants of another element with the class .class.

.class.class matches any element with both classes.

Whats the difference between using .Class or #ElementId in CSS?

An ID must be unique in a document. Classes can be used in any number and combination. So you can use one class on multiple elements and multiple classes on one element.

Difference between .class .class and .class .class

No, they aren't the same - the first example is a descendant selector, the second is a direct child selector.

---

.class .class will target all elements with the class .class which derive from any element which has the class .class, e.g

<div class="class">
 <div class="other">
    <div class="class"> This is targeted. </div>
 </div> 
</div>

jsFiddle example

---

.class > .class will only target direct children of elements with the class .class, e.g

<div class="class">
   <div class="other">
      <div class="class">This isn't targeted.</div>
   </div> 
   <div class="class">
      <div class="class">This is targeted, as it is a direct child.</div>
   </div>    
</div>

jsFiddle example.

What is the difference between class and classname in javascript?

Let's break this into answerable parts:

Question 1:

What is the difference between class and classname in javascript?

Your title question.

Answer 1:

Class is an attribute in an html element <span class='classy'></span>

While, on the other hand, .className is a property that can by called on an element to get/set its class.

var element = document.createElement('span');
element.className = 'classy'
// element is <span class='classy'></span>

Setting the class can also be accomplished with .getAttribute('class') and .setAttribute('class', 'classy'). We change manipulate classes so often, however, that it merited its own .className method.

---

Question 2:

However when I replace className above by class in the function above, the code doesn't work. So I am naturally wondering what the difference is between class and className.

Answer 2: element.class is not a property.

Class may be an attribute of an element, but you can't call it like el.class. The way you do it is by el.className, like you already figured out. If you look at the MDN for Element, you'll see that elements have many properties and methods, but .class isn't one.

---

Question 3:

Also what's the best way to return a list of children of a particular class name for a generic object?

Answer 3: Use .getElementsByClassName

Rather than using a purpose-made function, people frequently "chain" methods one-after-another to achieve your desired effect.

Based on your needs, I think you're asking for the .getElementsByClassName method. Here are the full docs and an excerpt:

The Element.getElementsByClassName() method returns returns a live HTMLCollection [array] containing all child elements which have all of the given class names.

To reuse the example from your answer:

var li = document.createElement('li');
var input = document.createElement('input');
input.setAttribute('class','answer_input');
li.appendChild(input);
console.log(li.getElementsByClassName("answer_input")[0]);
// would return the <input class='answer_input'> as the first element of the HTML array

What's the difference between tag.class and tag .class?

tag.class matches all elements with name tag and with the class class, e.g.:

div.foo { color: red; } matches <div class="foo">

tag .class matches all .class elements that are descendants of tag elements (note the space between tag and .class):

(Remember that "descendants" includes all children, their children, and so on - whereas, in comparison, the > (child selector) only selects immediate children and not any grandchildren.)

div .foo { color: red; } matches the <span> in <div><p><span class="foo">

tag#id and tag #id are similar to the above, except matching on the id attribute instead of the class attribute[1]

div#foo { color: red; } matches <div id="foo">

div #foo { color: red; } matches the <span> in <div><p><span id="foo">

Remember that because id="" attributes are meant to be unique that additional selectors may be superfluous, e.g. div#bar could be simplified to just #bar (unless you're reusing the same CSS rules on different pages where #bar may have different element tag names).

[1]: This is true in HTML, in other SGML and XML languages using CSS the .class and #id selectors can be mapped to other attribute names.

Difference of &.class vs & .class

The difference is this:

.parentClass {
  &.childClass {}
}

will actually generate the selector .parentClass.childClass, meaning that you are selecting for an element that has both classes, e.g. <div class="parentClass childClass">. This is likely not the case you want. Meanwhile, this:

.parentClass {
  & .childClass {}
}

will compile to:

.parentClass .childClass {}

...which will select an element with the class childClass that is a child of an element with the class parentClass, e.g.:

<div class="parentClass">
    <div class="childClass"></div>
</div>

---

As @deceze has pointed out, in your simplified example the & is not necessary, if all you want is to imply a hierarchical relationship, because it is syntactically identical to:

.parentClass {
  .childClass {}
}

...which also gives you .parentClass .childClass {}.

---

Related Topics