2

What are the implications of using the various selector configurations?

  1. span.classy.whatever { }
  2. span.classy, .whatever { }
  3. span .classy .whatever { }
  4. span, .classy, .whatever { }
Sabito stands with Ukraine
  • 4,271
  • 8
  • 34
  • 56
user3084728
  • 565
  • 1
  • 8
  • 16

5 Answers5

6

Period in CSS is used to denote the class selector. e;g;

Now as per your question Let see where these classes will take effect.

a. span.classy.whatever { } : It will affect on span element which has classy and whatever both the classes.

<span id="mySpan" class="classy whatever"> Span Text </span>

b. span.classy, .whatever { }: It will affect on span which has classy class and the elements those have whatever class.

<span id="mySpan" class="classy"> Span Text </span>

<div class="whatever"></div>

c. span .classy .whatever { }: It will affect on the element which has whatever class and the parent of this element would be classy and the parent of classy would be span.

<span>
    <span class="classy">
    <span class="whatever">
        inner most child
    </span>
</span>

d. span, .classy, .whatever { }: It will affect on the span, elements of classy class and whatever class.

<span>Span Text</span>

<div class="classy"></div>

<p class="whatever"></p>
Sachin
  • 40,216
  • 7
  • 90
  • 102
  • c is wrong ..... *the element which is decedent of span > element which has classy class and has whatever class.* Is element with class `whatever` who is inside another with class `classy` and inside a `span` – DaniP Feb 11 '14 at 18:17
  • 1
    @Danko Yes element which has `whatever` class and have the `classy` as parent and the parent of classy is `span`. I re-phrase my line. May be it was confusing earlier. – Sachin Feb 11 '14 at 18:23
1

1) will apply to all the spans with .classy and .whatever classes.

2) will apply to all the spans with .classy and all the elements with .whatever classes

3) will apply to all the elements with .whatever class which should be a child of an element with class .classy which inturn should be a child of a span. eg

<span>
   <div class="classy">
      <div class="whatever">This will be targeted</div>
   </div>
</span>

4) will apply to all spans, .classy and .whatever classes

Lokesh Suthar
  • 3,201
  • 1
  • 16
  • 28
1

They all mean different things and select different elements.

span.classy.whatever { }

The rules are applied to a <span> element that belongs to a class classy and a class whatever.

span.classy, .whatever { }

The rules are applied to a <span> element that belongs to a class classy, and to ANY element that belongs tho the class whatever.

span .classy .whatever { }

The rules are applied to an element that belongs to the whatever class that in a descendant of an element that belongs to the classy class that is a descendant of a <span> element.

span, .classy, .whatever { }

The rules are applied to ANY <span> element, ANY element that belongs to the classy class and ANY element that belongs to the whatever class.

helderdarocha
  • 23,209
  • 4
  • 50
  • 65
0
span.classy.whatever { }

This will match a span element, that has a class of classy and whatever

span.classy, .whatever { }

Will match a span element that has a class of classy and any element with the whatever class

span .classy .whatever { }

Will match a nested element

<span>
    <span class="classy">
        <span class="whatever">here</span>
    </span>
</span>

And finally

span, .classy, .whatever { }

Will match all span elements, and any element with with a class of classy and any element with a class of whatever

Nick R
  • 7,704
  • 2
  • 22
  • 32
0

span.classy.whatever { }

Targets span elements with both .classy and .whatever classes

span.classy, .whatever { }

Targets span elements with the class .classy and any element with the class .whatever

span .classy .whatever { }

Targets elements that have the class .whatever that are the children of elements with the class .classy that are children of span elements.

span, .classy, .whatever { }

Targets any span element, and any elements with either the class .classy or .whatever

Dryden Long
  • 10,072
  • 2
  • 35
  • 47