0

I found in a project the following 

<div class="gadget_title gradient37 vertsortable_head">
  ...
</div>

I know I can associate an element with a class (single one) (e.g. <div class='gadget'></div>, but how can multiple values be associated (what does that mean)?

How can that be selected with css selectors?

FindOut_Quran
  • 728
  • 3
  • 10
  • 27
  • 1
    It does mean the element has multiple `classes` set to it, which is absolutely normal and valid. – emerson.marini Jan 06 '15 at 12:35
  • This facilitates re-usablity of styles. You don't have to put all the styles in every class. Re-use whatever is needed. They can be selected just like a single class. – Abhitalks Jan 06 '15 at 12:36
  • The `CSS` selector would be: `div.gadget_title.gradient37.vertsortable_head`. Note there are no spaces between them, so it won't be consider an hierarchy, but a group. – emerson.marini Jan 06 '15 at 12:36
  • **You can associate as many classes as you like to your elements. ID's on the other hand are unique.** Take for instance three classes -> mammal, cat and dog. Given these classes you can logically build two elements: `
    ` and `
    ` **where** .mammal{ legs: 4; tail: 1; } .cat{ cleanliness: 9001; } .dog{ cleanliness: -3; } So, multiple classes can be extremelly useful to combine certain elements by their similar traits/characteristics.     – henser Jan 06 '15 at 12:46

1 Answers1

0

You can assign multiple classes to an HTML element, that will be combined.

You don't need to put all the classes in your CSS selector, but if you want to make sure the element has all three classes, then you must.

This element could be selected like this

.gadget_title
{
    ...
}

OR

.gradient37
{
    ...
}

OR

.gadget_title.gradient37
{
    ...
}

OR

.gradient37.vertsortable_head
{
    ...
}

OR

.gadget_title.vertsortable_head
{
    ...
}

OR

.gadget_title.gradient37.vertsortable_head
{
    ...
}
sodawillow
  • 12,497
  • 4
  • 34
  • 44