[Solved] Class rules declarations and usage.

[ThomasAJ]

I am having a heck of a hard time getting my head around differences between the following Class rule declaration subtleties.

1 .C1, .C2 { color: red; } <- Between the classes is a COMMA and SPACE
2 .C1 .C2 { color: red; } <- SPACE only
3 .C1.C2 { color: red; } <- NOTHING

I have found many ‘tutorials’ but they all seem to cover classes in conjunction with elements which may or may not be the same as the above.

Here is what I think they mean. Let’s use DIVs.

1. Selects any DIV with ‘class=”C1″‘ or ‘class=”C2″‘.
2. Selects any DIV with ‘class=”C1″‘. A DIV with ‘class=”C2″‘ is selected ONLY if ‘class=”C2″‘ is WITHIN a ‘class=”C1″‘ DIV.
3. Selects ONLY a DIV with ‘class=”C1 C2″‘.

I have a feeling I am dodgy with example 2.

[Alen]

This might help: http://codepen.io/alenabdula/pen/xsdkF

[ThomasAJ]

I get it now. Thank you both very much. Tom.

[Author]

Posts