Таргетинг на определенный столбец в макете столбца CSS - PullRequest
Новая
       7

Таргетинг на определенный столбец в макете столбца CSS

0 голосов
/ 07 сентября 2018

В макете CSS-столбца мне нужно настроить таргетинг на первый столбец и его дочерние элементы.

Со следующим кодом CSS: 

.multi-column {
    @media (min-width: 768px) {
        -webkit-column-count: 2;
        -webkit-column-gap: 10px;
        -moz-column-count: 2;
        -moz-column-gap: 10px;
        column-count: 2;
        column-gap: 10px;

        > li {
            -webkit-column-break-inside: avoid;
            page-break-inside: avoid;
            break-inside: avoid;
            overflow: hidden;
        }
    }
}
  • Как установить другой background-color для первого столбца?
  • Как установить другой color для элементов в последнем столбце?

Мне, вероятно, понадобится что-то вроде :first-column или что-то похожее на псевдоселектор ...

1 Ответ

0 голосов
/ 07 сентября 2018

Смысл состоит в том, чтобы добавить дополнительные обертки , которые затем станут grid-items , чтобы сделать групп или столбцов и получить способен нацеливать их, используя соответствующие селекторы :

Базовый пример: 

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-item {
  display: grid;
  /* other grid props which you'd normally have for the container */
}

.grid-item:first-child {background: blue} /* or: ":nth-child(1)", ":first-of-type", ":nth-of-type(1)" */
.grid-item:last-child {color: blue} /* ":nth-child(...)", ":nth-of-type(...)" */
<div class="grid-container">
  <div class="grid-item">
    <div>1.1</div>
    <div>1.2</div>
    <div>1.3</div>
  </div>
  <div class="grid-item">
    <div>2.1</div>
    <div>2.2</div>
    <div>2.3</div>
  </div>
  <div class="grid-item">
    <div>3.1</div>
    <div>3.2</div>
    <div>3.3</div>
  </div>
</div>

Конечно, вы можете избежать этого и сделать это с помощью множества селекторов , но это не совсем оптимально, другого пути нет. Может быть, :first-column или что-то подобное когда-нибудь возникнет ...

Другим способом, если подходит вариант использования, было бы объединить grid-template-rows с grid-auto-flow: column и более конкретными селекторами : 

.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow: column;
}

.grid-item {
  display: grid; /* make them grid-items as well and then position their items, if any */
}

.grid-item:nth-child(-n + 3) {background: blue} /* selects first three */
.grid-item:nth-child(n + 7) {color: blue} /* selects all but the first 6 */
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

Или просто grid-template-columns и по умолчанию горизонтальный поток : 

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-item {
  display: grid; /* make them grid-items as well and then position their items, if any */
}

.grid-item:nth-child(3n + 1) {background: blue} /* selects every third starting from the first  */
.grid-item:nth-child(3n + 3) {color: blue} /* selects every third */
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
...