: путаница с псевдо-классом последнего ребенка - PullRequest
Новая
       37

: путаница с псевдо-классом последнего ребенка

4 голосов
/ 01 января 2012

В этот JSFiddle , последний класс .tab не получает правильный border-radius эффект (верхний правый закругленный угол).

Я думаю, что моя логика правильна: :last-child выбирает в этом случае последний .tab из .tabbed.

Что я делаю не так?

CSS: 

body {
    background: black;
    color: white;
    padding: 5px; }

.tabbed {
    height: 550px;
}

.tabbed .tab {
    padding: 6px 14px;
    background: rgba(255,255,255,0.25);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 0px;
    border-left-width: 0;
    float: left;
}

.tabbed .tab:first-child {
    border-radius: 3px 0 0 0;
    border-left-width: 1px;
}

.tabbed .tab:last-child {
    border-radius: 0 3px 0 0;
}

HTML: 

<ul class='tabbed'>
    <li class='tab'>Menu 1</li>
    <li class='tab'>Menu 2</li>
    <li class='tab'>Menu 3</li>
    <li class='tab'>Menu 4</li>
    <li class='tab'>Menu 5</li>
    <li> <br/><br/> </li>
    <li class='dummy'>Content 1</li>
    <li class='dummy'>Content 2</li>
    <li class='dummy'>Content 3</li>
    <li class='dummy'>Content 4</li>
    <li class='dummy'>Content 5</li>
</ul>

Ответы [ 4 ]

5 голосов
/ 01 января 2012

Согласно этой документации :

Псевдокласс: first-child означает «если этот элемент является первым потомок его родителя ".: last-child означает", если этот элемент является последним «Дочерний элемент его родителя» эти псевдоклассы игнорируют текстовые узлы.

См. Также W3C doc

Это не применяется в вашем случае, потому что последний .tab не является последним дочерним элементом родительского ul.

Если вы создаете два списка, тогда css применяется как положено.

3 голосов
/ 01 января 2012

В комментарии вы утверждаете: «Он должен быть на том же родительском элементе ul. Или на другом ul, ниже последнего li на первом ul.»Если это так, то сделайте следующее: 

<ul class='tabbed'>
    <li class='tab'>Menu 1</li>
    <li class='tab'>Menu 2</li>
    <li class='tab'>Menu 3</li>
    <li class='tab'>Menu 4</li>
    <li class='tab'>Menu 5</li>
    <li>
    <ul>
    <li class='dummy'>Content 1</li>
    <li class='dummy'>Content 2</li>
    <li class='dummy'>Content 3</li>
    <li class='dummy'>Content 4</li>
    <li class='dummy'>Content 5</li>
    </ul>
    </li>
</ul>

Тогда этот CSS (с современными браузерами): 

.tabbed {
height: 550px; }

.tabbed .tab {
padding: 6px 14px;
background: rgba(255,255,255,0.25);
border: 1px solid rgba(255,255,255,0.4);
border-radius: 0px;
border-left-width: 0;
float: left; }

.tabbed .tab:first-child {
border-radius: 3px 0 0 0;
border-left-width: 1px; }

.tabbed .tab:nth-last-child(2) {
border-radius: 0 3px 0 0; }

.tabbed li:last-child {
   clear: left;
}

См. эту скрипку .

1 голос
/ 01 января 2012

Вот как бы я это сделал : 

body {
    background: black;
    color: white;
    padding: 5px; }

.content {clear:both;}
.tall {
    height: 550px;
}

.tabbed .tab {
padding: 6px 14px;
background: rgba(255,255,255,0.25);
border: 1px solid rgba(255,255,255,0.4);
float: left; }

.tabbed .tab:first-child {
border-radius: 3px 0 0 0;
border-left-width: 1px; }

.tabbed .tab:last-child {
border-radius: 0 3px 0 0; }

И поскольку я думаю, что неуместно включать контент в класс с именем tabbed, измените HTML на структуру: 

<div class="tall">
<ul class='tabbed'>
    <li class='tab'>Menu 1</li>
    <li class='tab'>Menu 2</li>
    <li class='tab'>Menu 3</li>
    <li class='tab'>Menu 4</li>
    <li class='tab'>Menu 5</li>
</ul>
<ul class="content">
    <li class='dummy'>Content 1</li>
    <li class='dummy'>Content 2</li>
    <li class='dummy'>Content 3</li>
    <li class='dummy'>Content 4</li>
    <li class='dummy'>Content 5</li>
</ul>
</div>
<hr/><!-- just here to show you the height remains -->
1 голос
/ 01 января 2012

Чтобы расширить Ответ Дидье Г. , то, что вы действительно должны использовать здесь, это :first-of-type & :last-of-type псевдо-селекторы. Однако селектор :nth-of-type (и его аналогичные сокращенные версии) не поддерживает использование имени класса для поиска, а только выбор, например, следующее выберет первого потомка .tabbed, если и только если у него есть класс .tab: 

.tabbed .tab:first-of-type

, тогда как будет выбран первый дочерний элемент .tabbed типа li: 

.tabbed li:first-of-type

Я не могу найти никаких ссылок, явно заявляющих об этом поведении, но это смутно подразумевается в спецификации :

Запись псевдокласса :nth-of-type(an+b) представляет элемент, имеющий an+b-1 братьев и сестер с таким же расширенным именем элемента

Где расширенное имя элемента является именем тега и не может быть селектором класса или идентификатора.

Вы можете увидеть это поведение в прямом эфире на JSFiddle .

...