Таблицы на CSS / Испытание: ещё одна CSS-таблица [18/18]

Курсы §29. Таблицы на CSS
1

Всем привет, помогите разобраться.

<html lang="ru">
<head>
    <title>Испытание: ещё одна CSS-таблица</title>
    <meta charset="utf-8">
    <base href="/assets/course86/">
    <link href="course.css" rel="stylesheet">
</head>
<body>
    <article>
        <ul>
            <li><img src="img/magic.png" alt=""></li>
            <li><img src="img/green-crystal.png" alt=""></li>
            <li><img src="img/gold.png" alt=""></li>
        </ul>
        <ul>
            <li><img src="img/skull.png" alt=""></li>
            <li><img src="img/stick.png" alt=""></li>
            <li><img src="img/blue-crystal.png" alt=""></li>
        </ul>
    </article>
</body>
</html>

CSS:

/* Небольшая подсказка, дальше сами */
article {
    display: table;
    width: 470px;
    background: url('img/wood.png');
    border: 5px solid #686868;
    margin-left: 10px;
    margin-top: 10px;
    border-collapse: separate;
    border-spacing: 15px 15px;
}

article ul {
    display: table-row;
}

article li {
    display: table-cell;
    padding: 20px;
    text-align: center;
    border: 10px solid #686868;
}

article li:nth-child(1) {
    width: 100px;
}

Вопрос в том почему в обоих колонках у первого элемента увеличивается ширина, даже если прописать так:

article ul:nth-child(1) li:nth-child(1) {
width: 100px;
}

Screenshot_1
Screenshot_1.jpg727×437 79.8 KB

2

Один из вариантов…

article li:first-child {
    width: 70px;
}

article li:nth-child(3n) {
    width: 110px;
}
1 лайк
3

Спасибо за ответ, а не подскажите почему в данном случае css свойство не работает. Должно же быть так “выберет первый по счёту дочерний элемент и этот элемент должен быть ul”.

<!DOCTYPE html>
<html lang="ru">
<head>
   <meta charset="utf-8">
</head>
<body>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
   </ul>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
    </ul>    
  </body>
  </html>

CSS:
ul:nth-child(1) {
font-size: 40px;
}

4

Не совсем понял вопрос:

ul:nth-child(1) {
    font-size: 40px;
}

У Вас в селекторе (1), если нужен второй ul напишите (2).

1 лайк
5

Извиняюсь, в описании ошибся! Имел ввиду выберет 1 элемент, но при записи ul:nth-child(1) { } не работает. Работает с ul:nth-child(2) { }. Не могу разобраться почему так.

6

ul:nth-child(1) – выберет все элементы внутри первого ul.
ul:nth-child(2) – выберет все элементы внутри второго ul.

1 лайк
7

Спасибо) Странно, все работает в браузере) но на сайте https://jsfiddle.net/ не действует

9

Данный момент заставил немного задуматься ахах), казалось что чего-то не понимаю, спасибо за ответы!

11

@vsolo
Ранее, этим утверждением я Вас ввёл в заблуждение:
ul:nth-child(1) – выберет все элементы внутри первого ul.
ul:nth-child(2) – выберет все элементы внутри второго ul.

Я должен был ответить так:
ul:nth-child(n) – выберет n-ный список ul, но не его элементы.

Это хорошо видно из Вашего примера:

Пример Вашего кода 
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <style>
      ul:nth-child(2) {
          font-size: 40px;
          color: green;
          border: 1px solid red;
        }
      </style>
  </head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>    
</body>
</html>

Свойства применяются к ul, но некоторые из них могут переходить к дочерним.
Поэтому у li изменился размер шрифта и его цвет.
Если бы ul:nth-child(2) выбирал все элементы внутри второго списка, – то и border применился бы ко всем li. Но, этого не происходит…
ul

Если нужны элементы списка – можно обратиться к ним так:

ul:nth-child(2) li {
    font-size: 40px;
    color: green;
    border: 1px solid red;
}

ul1

1 лайк