Условный селектор CSS на основе состояния DOM

Question

У меня есть следующий фрагмент кода, который я пытаюсь стилизовать:

<div class="group">
    <div class="tabs">
        <access type="full">
            <span class="tab">Hello</span>
        </access>
        <span class="tab">World!</span>
    </div>
</div>

Этот HTML-код будет меняться в зависимости от Router Guard, но в любой момент мне бы хотелось, чтобы каждая вкладкамежду ними должно быть поле 20px, а слева - 0.

Моя путаница связана с тем фактом, что первый дочерний элемент tabs будет либо компонентомвведите access или просто обычный span.

Итак, вот что я пытаюсь сделать:

/* Set every tab to have 20px spacing in between */
.tab {
    margin: 0 0 0 20px;
}

/* Select first child of tabs, whether access component or span and sets margin to 0 */
.tabs > *:nth-child(1) span:first-child,
.tabs span:first-child {
    margin: 0
}

Я рассуждаю так, что для первой части второго стиля, .tabs > *:nth-child(1) span:first-child, гласит:

Выберите первого дочернего элемента вкладок и выберите первого дочернего элемента

И второго:

Выберите первый дочерний элемент tabs

Как мне это сделать?

Answer 1

.tabs span:first-child

Это прямой надмножество

.tabs > *:nth-child(1) span:first-child

из-за наследующего комбинатора до span:first-child, что означает, что он также совпадает с внутренним span:first-child, что не то, что выхочу.

Как правило, если вы используете комбинатор >, чтобы отличать детей от внуков, вы должны использовать его везде, чтобы поддерживать последовательность и избегать ошибок, подобных этой.

В примечании,:nth-child(1) эквивалентно :first-child, и для согласованности рекомендуется придерживаться его еще раз.

Ваш селектор должен быть

.tabs > *:first-child > span:first-child,
.tabs > span:first-child

Answer 2

В моем подходе я добавляю поле справа на каждой вкладке, чтобы у 1-го не было ml:20px, но все .tabs были разделены на 20px.

.tabs .tab {
  margin-right: 20px;
}

access {
  margin: 0;
  padding: 0;
}

<div class="group">
  <div class="tabs">
    <access type="full">
      <span class="tab">Hello</span>
    </access>
    <span class="tab">World!</span>
  </div>
</div>

Answer 3

Вы можете использовать :first-child, чтобы получить первый тег внутри .tabs, а затем применить к нему margin:0; и охватить его:

.tab{

  margin: 0 0 0 20px;
}

.tabs > :first-child,
.tabs > :first-child span{
  margin:0;
}

Это охватывает как <access>, так и * 1008.* будучи первым ребенком.

пример codepen