Выберите дочерний элемент CSS

Question

Я использую режим автора в редакторе кислорода и хочу создать общий CSS для многих файлов XML. Я хочу иметь возможность выбрать дочерний элемент данного элемента без необходимости предварительно указывать имя дочернего элемента (только родительского элемента), например:

<data-collection>
      <data key="transfer-period" id ="1"/> 
      <data key="communication-profile" id="2">
        <wanCommunication></wanCommunication>
      </data>
</data-collection>  

Здесь я хотел бы выбрать дочерний элемент wanCommuncation элемента данных, не указывая элемент wanCommunication.

Кто-нибудь знает, как это достигается в CSS?

Спасибо заранее!

Answer 1

Использовать :first-child селектор.

data-collection data > :first-child

Использование вышеупомянутого селектора выберет каждого первого ребенка в data элемент, который имеет родительский элемент data-collection,

data-collection data > :first-child {
  background-color: #ededed;
}

<data-collection>
      <data key="transfer-period" id ="1"/>
      <data key="communication-profile" id="2">
        <wanCommunication>Hello :)</wanCommunication>
      </data>
</data-collection>

Answer 2

Да, ты можешь. И у вас есть много способов сделать это. Вот некоторые:

element: first-child (первый дочерний элемент)

element: last-child (последний дочерний элемент)

element:: nth-child (n) ('n' дочерний элемент)

Это только несколько. Вы можете проверить полный список селекторов CSS здесь.