Доступ к дочернему элементу во вложенных подразделениях с несколькими классами

#html #css #nested #parent-child

#HTML #css #вложенный #родитель-потомок

Вопрос:

Я хочу оформить только одну из ссылок в моем коде. Как я могу получить доступ к каждой индивидуальной ячейке? Я не нашел никаких похожих проблем в Интернете, поскольку существует несколько классов. Я несколько раз пытался использовать n-й дочерний элемент для назначения дочернего элемента дочернего элемента, но это не сработало.

Редактировать: я бы хотел избежать использования Javascript или других языков. Есть ли какой-либо способ сделать это, используя только HTML / CSS?

         <div class="grid">
            <div class="row">
              <div class="cell"></div>
              <div class="cell"></div>
              <div class="cell"></div>
            </div>
            <div class="row">
              <div class="cell"></div>
              <div class="cell"><a href="website2.com">Sample Text</a></div>
              <div class="cell"></div>
            </div>
            <div class="row">
              <div class="cell"></div>
              <div class="cell"></div>
              <div class="cell"><a href="website.com">Sample Text</a></div>
            </div>
          </div>

CSS:

 .grid {
    display: table;
    float: left;
    margin-left: 25px;
    padding-top: 10px;
    border-spacing: 20px
}
.row {
    display: table-row
}
.cell {
    width: 250px;
    height: 250px;
    border: 2px solid black;
    display: table-cell;
    border-radius: 15px;
    background: #35424a;
}

.grid :nth-child(3) .row :nth-child(3) .cell :nth-child(1){
    color: #fff;
    text-decoration: none;
}

Ответ №1:

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

Что-то вроде

.сетка .строка:n-го типа(2) .ячейка a { цвет: красный; }

для первой ссылки, а затем

.сетка .строка:n-го типа(3) .ячейка a { цвет: зеленый; }

для второй ссылки

 .grid .row:nth-of-type(2) .cell a {
  color: red;
}

.grid .row:nth-of-type(3) .cell a {
  color: green;
}

         <div class="grid">
            <div class="row">
              <div class="cell"></div>
              <div class="cell"></div>
              <div class="cell"></div>
            </div>
            <div class="row">
              <div class="cell"></div>
              <div class="cell"><a href="website2.com">Sample Text</a></div>
              <div class="cell"></div>
            </div>
            <div class="row">
              <div class="cell"></div>
              <div class="cell"></div>
              <div class="cell"><a href="website.com">Sample Text</a></div>
            </div>
          </div>

1. Спасибо! Это сработало. Когда я добавил другую ссылку в одну из строк, она тоже стала целевой. Я исправил это с помощью: .grid .строка:n-го типа (3) .ячейка: n-го типа (3) a { цвет: зеленый; }

2. Правильно. Или в конце правил вы можете добавить .grid .row:nth-of-type(3 n) .cell a { color: green; } , если хотите настроить таргетинг на все ссылки после этого

Ответ №2:

Вы можете попробовать следующий код для прямого доступа к отдельным ячейкам, вы можете различать их по их положению (в примере я покрасил первые 3 ячейки в красный цвет, вторые 3 — в зеленый, и я ввел текст во вторую ячейку):

 var x = document.getElementsByClassName("cell");
var i;
for (i = 0; i < x.length; i  ) {
  if (i <= 2)
    x[i].style.backgroundColor = "red";
  else if (i > 2 amp;amp; i <= 5)
    x[i].style.backgroundColor = "green";
    
  if (i == 1)
   x[i].innerHTML = 'I'm the second element';
}

 .grid {
    display: table;
    float: left;
    margin-left: 25px;
    padding-top: 10px;
    border-spacing: 20px
}
.row {
    display: table-row
}
.cell {
    width: 250px;
    height: 250px;
    border: 2px solid black;
    display: table-cell;
    border-radius: 15px;
    background: #35424a;
}

.grid :nth-child(3) .row :nth-child(3) .cell :nth-child(1){
    color: #fff;
    text-decoration: none;
}

         <div class="grid">
            <div class="row">
              <div class="cell"></div>
              <div class="cell"></div>
              <div class="cell"></div>
            </div>
            <div class="row">
              <div class="cell"></div>
              <div class="cell"><a href="website2.com">Sample Text</a></div>
              <div class="cell"></div>
            </div>
            <div class="row">
              <div class="cell"></div>
              <div class="cell"></div>
              <div class="cell"><a href="website.com">Sample Text</a></div>
            </div>
          </div>

1. Здравствуйте. Спасибо за вашу помощь. Тем не менее, я хотел бы придерживаться только использования html / css для этого, если это возможно. Я должен был указать это в своем вопросе.