Jump to content
  • 0

Не работает :nth-child


Alex.a
 Share

Question

<div class="box-two">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
</div>
.box-two:nth-child(2n) {
    color: red;
}

Ни в какую не хочет работать, браузер chrome, редактор brackets. First-child и last-child тоже не работают, что может быть не так?

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By zeiger2
      Здравствуйте! У меня стоит задача, что при наведении на блок li строка должна поменять цвет, в том числе и картинка. Я меняю картинку с помощью 
      background-image: none;     background: url(../img/check_icon_red.png) left no-repeat;   Но теперь картинка позицианируется не там где должна, её можно поставить на место только вручную, через -100px. Нужно поставить ровно туда, где она была. Должна быть в одном ряду с другими
    • By alxtmb
      Добрый день подскажите как можно решить с помощью nth-child такой вопрос. Есть таблица:
      <table> <tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> <tr> <td>1</td><td>2</td> </tr> <tr> <td>3</td><td>4</td> </tr> </table> Как можно убрать(скрыть) первую ячейку в каждой четной строке? Должны скрыться все ячейки где цифра 3.
      Спасибо за помощь.
    • By Oktava6
      Добрый день! К сути:
       
      Есть таблица, в которой применено чередование цветов в четных/нечетных строках:
      tr:nth-child(2n) td{ background-color: #def;}tr:nth-child(2n+1) td{ background-color: #ddf;}Чекбоксом скрываю часть строк:
      #check-in:checked ~ * .up{ display: none;}После этого чередовании цветов в строках сбивается.
      Есть ли какая-либо возможность применить чередование только к тем строкам, которые отображены (т.е. display: table-row) или может есть более простые способы удалить строки с сохранением чередования цветов?
      Заранее спасибо за советы!
       
      html:
      <input type="checkbox" id="check-up"><input type="checkbox" id="check-in"> <table> <thead> <tr><td></td></tr> </thead> <tbody> <tr class="up"><td></td></tr> <tr class="in"><td></td></tr> <tr class="up"><td></td></tr> <tr class="up"><td></td></tr> <tr class="in"><td></td></tr> <tr class="in"><td></td></tr> <tr class="up"><td></td></tr> <tr class="in"><td></td></tr> ............................. <tr class="in"><td></td></tr> </tbody> </table>
    • By evanre
      Здравствуйте, помогите пожалуйста. Есть блок типа "Аккордеон" (вертикальные вкладки).
       
      Все работает кроме класса ".accordion-arrow", этот класс подразумевает под собой стрелку которая находится рядом с заголовком одного из 3х элементов и меняется в зависимости от состояния радио-инпута.

      Стрелка есть, но на всех элементах она отображается как "не-активная". т.е. когда элемент чекнутый, стрелка не меняется.
    • By advokatua
      Проблема с псевдоклассом nth-child.
      Не могу понять каким образом он 3-ий "а" элемент воспринимает как 4-ый, а первого якобы вообще нету.
      Получается так будто элемент header тоже входит в счет, но причем тут хедер если явно указано
      .categories a:nth-child(1)
      ?
      55-ая строка CSS-ника
      Песочница: http://cssdesk.com/qxEvw
      Может кто подсказать или направить где конкретно почитать об таком странном поведении?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy