CODEWITHSUNDEEP
htmlcss
Alexey Borozdin
Alexey Borozdin

Reputation: 19

Change in "li" with two classes

I have

<li class="item itemshad edited">
  <div class="itemsetting" style="">
    <span class="icon"><i class="icon-home"></i></span>
    <span class="inputspan" style="float: left;margin-top: 1px;"><input class="menuName" type="text" value="Text" style=""></span><span class="list" style="margin-left: 6px;"><i class="icon-reorder"></i></span>
  </div>
</li>

<li class="item itemshad edited selected">
  <div class="itemsetting" style="">
    <span class="icon"><i class="icon-home"></i></span>
    <span class="inputspan" style="float: left;margin-top: 1px;"><input class="menuName" type="text" value="Text" style=""></span><span class="list" style="margin-left: 6px;"><i class="icon-reorder"></i></span>
  </div>
</li>

if the "li" has a class of the selected and edited to change the thickness of the border in input.

if that's so

.selected .edited input  {
    border: 2px dotted #ccc;
}

Does not work

Upvotes: 1

Views: 911

Answers (3)

Chamara Keragala
Chamara Keragala

Reputation: 5777

It Should be 

.edited.selected input  {
    border: 2px dotted #ccc;
}

For more info on Multiple Class / ID and Class Selectors - http://css-tricks.com/multiple-class-id-selectors/

Upvotes: 1

Niels
Niels

Reputation: 49929

Do this:

.selected.edited input

Removed the space character. Otherwise .edited has to be inside .selected.

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

To specify multiple classes on a single element, just join them together:

.selected.edited input

This is because the space character is a combinator that means "any descendant of"

Upvotes: 4

Related Questions