Стиль определенной c строки или столбца таблицы HTML с использованием класса css для таблицы

Question

У меня есть таблица в html с "стилем" класса CSS. Как следует использовать этот класс для стилизации определенной c строки или столбца в таблице?

Ниже приведен код HTML:

<table class="style">
  <tbody>
    <tr>
      <td>1</td><td>2</td><td>3</td>
    </tr>
    <tr>
      <td>4</td><td>5</td><td>6</td>
    </tr>
    <tr>
      <td>7</td><td>8</td><td>9</td>
    </tr>
  </tbody>
</table>

Я хочу стилизовать только первую строку. Это можно сделать, если у нас есть класс только для первого тега tr. Но как сделать то же самое с помощью класса «стиль»?

Answer 1

Вы можете попробовать следующий фрагмент.
Вот объяснение : nth-child () .

.style tbody>:nth-child(1) {
  background: red;
}

<table class="style">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>
</table>

Answer 2

Вы можете использовать селектор псевдокласса с именем nth-child, который принимает параметр номера позиции элемента.

Ниже приведен пример

.style {
  border: 1px solid olive;
  width: 100px;
}

.style tr:nth-child(1) {
  background: red;
}

.style tr:nth-child(2) {
  background: blue;
}

.style tr:nth-child(3) {
  background: green;
}

<table class="style">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

Или вы можете использовать другой селектор псевдокласса, называемый nth-of-type.

Ниже приведен пример

.style {
  border: 1px solid olive;
  width: 100px;
}

.style tr:nth-of-type(1) {
  background: red;
}

.style tr:nth-of-type(2) {
  background: blue;
}

.style tr:nth-of-type(3) {
  background: green;
}

<table class="style">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>

и вот еще один способ использования другого параметра even или odd в селекторе псевдокласса nth-child.

Пример

.style {
  border: 1px solid olive;
  width: 100px;
}

.style tr:nth-child(odd) {
  background: black;
}

.style tr:nth-child(even) {
  background: white;
}

<table class="style">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>

Answer 3

Используйте CSS: nth-child Selector Вот ссылка для справки.

Пример .style tr:nth-child(1) { background: red; }