Jump to content
  • 0

Проблема с nth-child


advokatua
 Share

Question

Проблема с псевдоклассом nth-child.

Не могу понять каким образом он 3-ий "а" элемент воспринимает как 4-ый, а первого якобы вообще нету.

Получается так будто элемент header тоже входит в счет, но причем тут хедер если явно указано

 .categories a:nth-child(1)

?

55-ая строка CSS-ника

Песочница: http://cssdesk.com/qxEvw

Может кто подсказать или направить где конкретно почитать об таком странном поведении?

Edited by advokatua
Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

ничего подобного, элементов "а" 3, чтобы выбрать последний 3-ий надо набрать


.categories a:nth-child(4) {

В этом и казус, не могу его понять, почему он считает всю ветку, а не только одни ссылки.

если бы с 0 считалось, то надо было бы набрать:


.categories a:nth-child(2) {

Не работает даже если лишнее почистить

http://cssdesk.com/qxEvw

Фактически header висит будто еще один элемент "а"

Edited by advokatua
Link to comment
Share on other sites

  • 0

Дык блин, это я уже догадался, тогда почему он вообще работает, там ведь указана "а" в селекторе


.categories a:nth-child(4) {

Само описание псевдо класса:

Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.
Link to comment
Share on other sites

  • 0
C нуля считает. 3 значит 4.

С 1 считает http://htmlbook.ru/css/nth-child

тогда почему он вообще работает, там ведь указана "а" в селекторе
categories a:nth-child(4) 

nth-child работает следующим образом:

Выбирает у родителя (в данном случае у .categories) все дочерние элементы с определенным порядковым номером (1 - header; 2, 3, 4 - а), проверяет, является ли этот элемент ссылкой, и если да, то применяет к этому элементу прописанные стили. Принцип работы :nth-child можно посмотреть на следующем примере.

Если нужна вторая дочерняя ссылка, встречающаяся у родителя, неважно с каким порядковым номером, то используйте :nth-of-type. Независимо от того, сколько других элементов будет между двумя ссылками и перед ними, a:nth-of-type(2), к примеру, применит стили только ко 2 встретившейся ссылке (пример).

Про различия между :nth-child и :nth-of-type можно почитать в этой статье http://habrahabr.ru/post/119139/

Почитать о поведении этих псевдоклассов можно в спецификации: nth-child, nth-of-child

  • Like 1
Link to comment
Share on other sites

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 Alex.a
      <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 тоже не работают, что может быть не так?
    • 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 port723
      Всем привет,
       
      Страница с проблемой: http://mir-kaminov.su/foto-kaminov
      Суть проблемы: в фотогалерее после 2х кликов по одному изображению (увеличить и потом уменьшить картинку для просмотра) если отвести курсор в сторону - появляется оранжевая рамка на этой малой картинке.
      И пропадает только после клика по пустой области сайта. Похоже на "снять выделение".
      В хроме это малый прямоугольник, а в мозилле это прямоугольник во весь размер малого изображения.
       
      Не красиво это, второй день никак не найду корень проблемы. Самоучка, и прошу сильно не ругать.
       
      Прошу помощи,
      коллеги выручайте пожалуйста, где и на что заменить код ?
       
       
      Скриншот проблемы: фотка слева вверху с этой навязчивой оранжевой рамкой в точечку

    • By varanika
      Люди, вот скоро крыша съедет. Пытаюсь добиться красоты вкладок. Важно, чтобы при активации каждой вкладки текст ее шапки приобретал тот же цвет, что и линия подчеркивания, а выходит глюк и первая вкладка навечно остается в цвете #333....
       
       
      Код
        <div class="m-vibor">              <br id="tab2"/>              <br id="tab3"/>              <a href="#tab1" class="m-vibor-menu">Категории</a>              <a href="#tab2" class="m-vibor-menu">Гамма</a>              <a href="#tab3" class="m-vibor-menu">Полезное</a>              <div>                  <select class="m-category-menu">                     Текст 1                  </select>            </div>              <div>                     Текст 2                  </div>             <div>              Текст 3          </div>       </div>   CSS  #tab2, #tab3 {    position: fixed;}.m-vibor > a, .m-vibor #tab2:target ~ a:nth-of-type(1), .m-vibor #tab3:target ~ a:nth-of-type(1), .m-vibor > div {    padding: 0px 19px;}.m-vibor > a, .m-vibor #tab2:target ~ a:nth-of-type(1), .m-vibor #tab3:target ~ a:nth-of-type(1), .m-vibor #tab1:target ~ a:nth-of-type(1){    border-bottom: 1px solid #777;} .m-vibor > a {    line-height: 28px;    text-decoration: none;}#tab2, #tab3, .m-vibor > div, .m-vibor #tab2:target ~ div:nth-of-type(1), .m-vibor #tab3:target ~ div:nth-of-type(1) {    display: none;    }.m-vibor > div:nth-of-type(1), .m-vibor #tab2:target ~ div:nth-of-type(2), .m-vibor #tab3:target ~ div:nth-of-type(3) {    display: block;}  И проблемная часть:  .m-vibor > a:nth-of-type(1), .m-vibor #tab2:target ~ a:nth-of-type(2), .m-vibor #tab3:target ~ a:nth-of-type(3) {      border-bottom: 1px solid #333;      color: #333;  }.m-vibor a:hover, .m-vibor a:active, .m-vibor a:target {    color: #333;    border-bottom: 1px solid #333;}  Ну почему Категории остаются темнее, а их подчеркивание меняется??? 
×
×
  • 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