-1

Are the following ways to was of styling with css mean the same thing. For the first one, is it target someclassA and someclassB if they are both on the same element? And the second one, target elements with someclassA or someclassB? How do they differ from .someclassA, .someclassB?

.someclassA.someclassB {
}

.someclassA .someclassB {
}

.someclassA, .someclassB {
}
sg2019
  • 39
  • 4

2 Answers2

1

These selector is worked following code. And these selector's specificity is:

  1. .someclassA.someclassB: 0 2 0
  2. .someclassA .someclassB: 0 2 0
  3. .someclassA: 0 1 0

.someclassA.someclassB {
  color: red;
}

.someclassA .someclassB {
  color: blue;
}

.someclassA,
.someclassB {
  color: green;
}
<p class="someclassA">.someclassA</p>
<p class="someclassB">.someclassB</p>
<p class="someclassA someclassB">.someclassA.someclassB</p>
<p class="someclassA">
  <span class="someclassB">.someclassA .someclassB</span>
</p>
<p class="someclassB">
  <span class="someclassA">.someclassB .someclassA</span>
</p>
sanriot
  • 804
  • 4
  • 13
1

The following selector affects elements that have both CSS classes:

.someclassA.someclassB

The following selector affects elements with class someclassB that are descendants of an element with class someclassA.

.someclassA .someclassB

The last selector affects elements that have class someclassA and/or someclassB:

.someclassA, .someclassB
connexo
  • 53,704
  • 14
  • 91
  • 128