Блог

Главная - Вопросы по программированию - Примените стиль CSS к первому элементу типа, если уже используете:nth-child

Примените стиль CSS к первому элементу типа, если уже используете:nth-child

#html #css #css-selectors

#HTML #css #css-селекторы

Вопрос:

В следующем примере я бы не хотел применять какой-либо цвет фона к ячейке Not here... .

Другими словами, я хотел бы применить свой CSS .class tag:modifer только к первому дочернему элементу типа tag . 

 .foo {
border-collapse: collapse;
}

.foo tr:nth-child(1) td:nth-child(1) {
background-color: green;
}

.foo tr:nth-child(2) td:nth-child(2) {
background-color: red;
}  
 <table class="foo">
  <tr><td>A</td><td>B</td></tr>
  <tr><td>C</td>
  <td>
     <table><tr><td>Not here...</td></tr></table>
  </td>
  </tr>
</div>

Комментарии:

1. может быть, добавить > после первого селектора?

2. вероятно .foo > tbody > tr:nth-child(1) ...

Ответ №1:

  1. Используйте комбинатор прямого потомка >
  2. Найдите предка выше по дереву <div>
  3. Используйте nth-of-type 
 div > table > tbody > tr:first-of-type > td:first-of-type 
  

 .foo {
  border-collapse: collapse;
}

div>table>tbody>tr:first-of-type>td:first-of-type {
  background-color: green;
}

.foo tr:nth-child(2) td:nth-child(2) {
  background-color: red;
}  
 <div>
  <table class="foo">
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr>
      <td>C</td>
      <td>
        <table>
          <tr>
            <td>Not here...</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>

Комментарии:

1. В вашем решении вы избавляетесь от tr:nth-child(1) td:nth-child(1) . Я хотел бы рассмотреть общий случай.

2. Если вы используете nth селекторы, то вам не следует беспокоиться об общих аспектах и ожидать конкретных исключений

3. Также это таблица с вложенными таблицами и nth-child(1) == first-of-type для всех намерений и целей при работе со структурами таблиц, поскольку таблица должна иметь tbody в качестве дочернего элемента, у tbody должен быть tr в качестве дочернего элемента, у tr должен быть th или td в качестве дочернего элемента.

Ответ №2:

Вы можете переопределить стиль с помощью другого селектора:

 .foo {
  border-collapse: collapse;
}

.foo tr:nth-child(1) td:nth-child(1) {
  background-color: green;
}

.foo tr:nth-child(2) td:nth-child(2) {
  background-color: red;
}

.foo table td:not(#random_id_for_specificity){
  all:initial; /*to override everything*/
}  
 <table class="foo">
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
    <td>
      <table>
        <tr>
          <td>Not here...</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Комментарии:

1. Это хорошо, но я не универсальный, поскольку мне приходится аннулировать каждое отдельное правило CSS. В моем случае использования у меня есть много других правил CSS border, font-weight, ... .

2. @nowox вы можете использовать all:unset (обновите мой ответ), но обратите внимание на поддержку браузера