Как применить псевдокласс :nth-child в файле название.module.css?

Question

[GeorgeKay]

https://codesandbox.io/p/sandbox/test-nth-l6hn6s?f...

я использую next js, может в этом проблема, а может я просто неправильно написал класс
в общем вот так выглядит код название.module.css

.grid-container {
    background-color: blueviolet;
}

.grid-container div:nth-child(3n+1) {
    justify-items: start;
    background-color: rgb(253, 228, 0);
}

.grid-container div:nth-child(3n+2) {
    justify-items: center;
}

.grid-container div:nth-child(3n+3) {
    justify-items: end;
}

вот так jsx

import styles from "./cards.module.css";

<div
          className={`grid sm:grid-cols-2 lg:grid-cols-3 gap-6 items-center ${styles["grid-container"]}`}
        >
          {[...Array(3)].map((_, index) => (
            // <Card key={index} />

            <div
              key={index}
              style={{ width: "200px", height: "200px", background: "blue" }}
              className="test"
            >
              {index}
            </div>
          ))}
        </div>

в итоге получается такой вывод, background-color: blueviolet работает, а остальные классы нет

Comments

[Михаил Р.]

Залейте код в песочницу и киньте сюда ссылку.

[GeorgeKay]

Михаил Р., добавил сверху

[Михаил Р.]

GeorgeKay, не работает

[GeorgeKay]

вроде поправил, поставил public

[modelair]

что-то я не вижу проблемы в песочнице, работает же

[GeorgeKay]

modelair, блин я не понимаю, как ее сделать доступной для редактирования, там не срабатывает justify-items

Answer 1

[Сергей delphinpro]

Не то свойство используете

Comments

[GeorgeKay]

а к контейнеру это можно применить?Я понял, что стили применялись к элементам, а грид является сам контейнер, и следовательно justify-items не работал. Или так не делают? или такое делают через js?

[Сергей delphinpro]

GeorgeKay, justify-items задается для контейнера и определяет значение для свойств детей justify-self, если оно не будет переопределено.

.container { justify-items: center; }
это то же самое что и
.container .child { justify-self: center; }
только для всех сразу.