Как использовать селектор last-child?

Question

Я хочу, чтобы просто добавить border-bottom к последнему .slab

Я попробовал несколько вещей, и я не могу понять, что происходит.

Случай 1 - использовать .wrapper:last-child

Если бы я попробовать это на codepen.io или на StackOverflow фрагментах, я не получаю border-bottom на последнем .slab

Если бы я попробовать это на JSFiddle или запустить код отдельно в Chrome, я получаю border-bottom на последнем .slab. Однако, если я раскомментирую <div class="something">New</div>, то border-bottom на последнем .slab исчезнет как в JSFiddle, так и в Chrome.

.wrapper { 
 
    width: 10em; 
 
    margin: 1em; 
 
} 
 
.wrapper:last-child { 
 
    border-bottom: 1px solid #999; 
 
} 
 
.slab { 
 
    background-color: #eee; 
 
    border-top: 1px solid #999; 
 
    padding: 1em; 
 
}

<div class="wrapper"> 
 
    <div class="slab">Hello</div> 
 
    <div class="slab">Hello</div> 
 
    <div class="slab">Hello</div> 
 
</div> 
 
<!--<div class="something">New</div>-->

Случай 2 - использовать .slab:last-child

Оказывается, это работает везде - JSFiddle, Chrome, codepen.io и Stackoverflow. Но я думал, что выбор был действительно последним-ребенок из.slab и не последние .slab

.wrapper { 
 
    width: 10em; 
 
    margin: 1em; 
 
} 
 
.slab { 
 
    background-color: #eee; 
 
    border-top: 1px solid #999; 
 
    padding: 1em; 
 
} 
 
.slab:last-child { 
 
    border-bottom: 1px solid #999; 
 
}

<div class="wrapper"> 
 
    <div class="slab">Hello</div> 
 
    <div class="slab">Hello</div> 
 
    <div class="slab">Hello</div> 
 
</div>

Вопросы:

1. Означает ли .slab:last-child последний ребенок от .slab или последним вхождением .slab?
2. В случай 1, почему border-bottom исчезает после введения несвязанного элемента .something?
3. Каков наилучший способ применения border-bottom до последних .slab?

Answer 1

1. Означает ли .slab:last-child последний потомок .slab или последнее вхождение .slab?

   Ни то, ни другое. Это совпадает с элементом,

   • имеет класс «плиты», и
   • является последним потомком своего родителя.

   
   Последний .slab в пределах его родителя необязательно может быть его последним ребенком. .slab:last-child будет совпадать, если и только если оба условия верны для данного элемента.

2. В случае , почему это border-bottom исчезают после введения неродственного элемента .something?

   Потому что тогда последний элемент родительского элемента .wrapper станет другим элементом. Этот элемент не связан с .wrapper - он связан с ним, став его следующим родным братом.

   Элементы .slab в пределах этой обертки никогда получить границу; граница применяется к .wrapper до тех пор, пока она является последним ребенком ее родителем. (Кстати, родитель .wrapper в ваших примерах подразумевается, что body.)

3. Каков наилучший способ применить border-bottom к последнему .slab?

   Вы не сможете сделать это надежно, если вы не можете гарантировать, что единственными возможными детьми .wrapper являются .slab элементов, в этом случае имя класса, то становится совершенно не имеет значения (но вы можете включить его в свой селектор, чтобы вы не соответствовали последнему ребенку .wrapper, когда это не a .slab).

Answer 2

:last-childstructural pseudo-class selector относится к родным братьям и сестрам. Это эквивалентно :nth-last-child(1),

С точки зрения вашего кода, вы должны применить :last-child к .slab для выбора последнего брата родителя div.wrapper.

Если у последнего ребенка div.wrapper не было класса slab, селектор не соответствовал бы. Это ничего не сделало.

Если :last-child были применены к div детей div.wrapper, как это:

.wrapper > div:last-child { ... }

...то селектор будет соответствовать последнему ребенку, независимо от class, id или других атрибутов. Он будет соответствовать любому div. Если последний ребенок не был div, селектор ничего не сделал.

Если вы хотите, чтобы соответствовать последним ребенком в div.wrapper, независимо от ничего – означает, что он просто должен быть последним ребенком – тогда вы могли бы сделать что-то вроде этого:

.wrapper > *:last-child { ... }

Без > дочерний комбинатор, скажем, .wrapper *:last-child { ... }, последний дочерний элемент всех родительских элементов потомков будет сопоставлен.

---

При выборе .wrapper:last-child, вы ориентируетесь элемент с классом wrapper, который является последним потомком своего родителя (предположительно body, в данном случае).

Если div.wrapper является единственным потомком своего родителя, то :last-child, :first-child, :only-child и большинство других ключевых слов Селекторов структурного псевдо-класса будут соответствовать.

---

Для лучшего понимания этих селекторов (и всех остальных), обратитесь к этому разделу CSS спецификации: http://www.w3.org/TR/css3-selectors/#selectors

Answer 3

last-child означает именно то, что говорит ... самый последний элемент это ребенок родителя.

Не последний из классов ... последний элемент.

Нет last-of-class селектор.

Это: .slab:last-child означает последний ребенок, который также имеет класс .slab.

Если это не последний ребенок, он не будет применяться и, в равной степени, если у него нет класса .slab, он не будет выбран.