Как правильно указать стили при вложенности одного и того же строкового контейнера?

Question

[Legal Adviser]

Всем привет.
Есть такая структура:

<div class="radio-center">
	<span class="aaaform-control-wrap mes-radio">
		<span class="aaaform-control aaaradio class-mes" id="id-mes">
			<span class="aaalist-item first">
				<label><input type="radio" name="mes-radio" value="до года" checked=""><span class="aaalist-item-label">до года</span></label></span>
			<span class="aaalist-item">
				<label><input type="radio" name="mes-radio" value="1-3 лет"><span class="aaalist-item-label">1-3 лет</span></label></span>
			<span class="aaalist-item">
				<label><input type="radio" name="mes-radio" value="3-5 лет"><span class="aaalist-item-label">3-5 лет</span></label></span>
			<span class="aaalist-item last">
				<label><input type="radio" name="mes-radio" value="от 5 лет"><span class="aaalist-item-label">от 5 лет</span></label></span>
		</span>
	</span>
</div>

Скажем так:
- у главного родителя span есть класс - mes-radio
- у его первого дочернего span есть класс - class-mes
...все остальные дочерние span не интересуют.
Вопрос:
Как правильно присвоить стили в классах только для:
1) span с классом mes-radio
2) span с классом class-radio
- чтобы на последующие дочерние span эти классы со стилями не распространялись?

Answer 1

[IIIu6ko]

Так

.radio-center > .mes-radio {}
.aaaform-control-wrap > .class-mes {}

Или так

.aaaform-control-wrap.mes-radio {}
.aaaradio.class-mes {}

Или сделать доп. класс(модификатор)

<div class="radio-center">
  <span class="aaaform-control-wrap mes-radio mes-radio--wrap">
    <span class="aaaform-control aaaradio class-mes class-mes--aaaradio" id="id-mes">
      <span class="aaalist-item first">
        <label><input type="radio" name="mes-radio" value="до года" checked=""><span class="aaalist-item-label">до года</span></label></span>
      <span class="aaalist-item">
        <label><input type="radio" name="mes-radio" value="1-3 лет"><span class="aaalist-item-label">1-3 лет</span></label></span>
      <span class="aaalist-item">
        <label><input type="radio" name="mes-radio" value="3-5 лет"><span class="aaalist-item-label">3-5 лет</span></label></span>
      <span class="aaalist-item last">
        <label><input type="radio" name="mes-radio" value="от 5 лет"><span class="aaalist-item-label">от 5 лет</span></label></span>
    </span>
  </span>
</div>

.mes-radio.mes-radio--wrap {}
.class-mes.class-mes--aaaradio{}

Comments

[Legal Adviser]

Спасибо.
Я забыл про >
А когда вспомнил, то просто сделал так: class-mes > span