Как обратиться к элементу внутри элемента?

Question

Как обратиться к элементу внутри элемента?

Рейтинг: 1Ответов: 1Опубликовано: 08.03.2023

Как обратиться к тегу li, который находиться в div class="group"? Надо к каждому элементу li придать одно свойство через CSS, но без придачи class к каждому элементу li

На сайте есть и другие элементы списка со своим стилем. Писать в class в каждом li не хочется

li{
  color: coral;
  background-color: bisque;
  width: 40px;
  height: 20px;
  margin: 5px;
  border-radius: 5px;
  text-align: center;
}

<div class="group">
  <ul>
    <li>0012</li>
    <li>0023</li>
    <li>0034</li>
    <li>0045</li>
    <li>0078</li>
    <li>0093</li>
    <li>0123</li>
    <li>0198</li>
    <li>0211</li>  
    <li>0236</li>
  </ul>
</div>

css html html5 веб-программирование css3

Источник: Stack Overflow на русском

Answer 1

▲ 0

Для применения стилей к каждому n-ному элементу li внутри ul, можно использовать псевдокласс :nth-child().

Например, чтобы применить стили только к четным элементам li, можно использовать следующий CSS код:

div.group ul li:nth-child(even) {
  color: coral;
  background-color: bisque;
  width: 40px;
  height: 20px;
  margin: 5px;
  border-radius: 5px;
  text-align: center;
}

<div class="group">
  <ul>
    <li>0012</li>
    <li>0023</li>
    <li>0034</li>
    <li>0045</li>
    <li>0078</li>
    <li>0093</li>
    <li>0123</li>
    <li>0198</li>
    <li>0211</li>  
    <li>0236</li>
  </ul>
</div>

А для того, чтобы применить стили только к нечетным элементам li, можно использовать следующий CSS код:

div.group ul li:nth-child(odd) {
  color: coral;
  background-color: bisque;
  width: 40px;
  height: 20px;
  margin: 5px;
  border-radius: 5px;
  text-align: center;
}

<div class="group">
  <ul>
    <li>0012</li>
    <li>0023</li>
    <li>0034</li>
    <li>0045</li>
    <li>0078</li>
    <li>0093</li>
    <li>0123</li>
    <li>0198</li>
    <li>0211</li>  
    <li>0236</li>
  </ul>
</div>

Также можно задать каждому элементу номеруя его черёдность:

div.group ul li:nth-child(1) {
    color: red;
}

div.group ul li:nth-child(2){
    color: coral;
}

<div class="group">
  <ul>
    <li>0012</li>
    <li>0023</li>
    <li>0034</li>
    <li>0045</li>
    <li>0078</li>
    <li>0093</li>
    <li>0123</li>
    <li>0198</li>
    <li>0211</li>  
    <li>0236</li>
  </ul>
</div>

:nth-child() считает все дочерние элементы родительского элемента, а не только элементы с определенным классом или тегом.

Как обратиться к элементу внутри элемента?

Ответы