выберите элемент «внутри»: псевдо-селектор первого ребенка, используя CSS

Question

Добрый день.

У меня есть проблема, структура, как это:

<ul> 
    <li> 
     <span><span> 
    </li> 
    <li class="selected"> 
     <span><span> 
    </li> 
    <li class="selected"> 
     <span><span> 
    </li> 
    <li class="selected"> 
     <span><span> 
    </li> 
    <li> 
     <span><span> 
    </li> 
</ul> 

Я хотел бы, чтобы выбрать первое и последнее, что выбрали на родителе ... код псевдо должно быть так:

li.selected span { background: #FF4D6E; color: white; } 
li.selected:first-child span{border-radius:30px;} 
li.selected:last-child span{border-radius:30px;} 

проблема заключается в том, что span находится внутри коллекции .selected, так что я хотел бы иметь первый .selected, и его span

Answer 1

Это невозможно, потому что элемент класса .selected не является первым из его родительского элемента. Но вы можете сделать обходной путь здесь, используя селекторы родного брата, как показано ниже:

/* first child */ 
li.selected span{ 
    border-radius: 30px; 
} 

/* middle children */ 
li.selected + li.selected span{ 
    border-radius: 0px; 
} 

/* last child */ 
li.selected ~ li.selected ~ li.selected span { 
    border-radius: 30px; 
} 

выше код если у вас есть только три .selected элементы. Если у вас больше, и вы знаете счет, то измените последний дочерний код в приведенном выше вопросе относительно счета. Например, если у вас есть четыре элемента .selected.

li.selected ~ li.selected ~ li.selected ~ li.selected span {  
    border-radius: 30px; 
} 

Example Fiddle

Answer 2

Если вы используете JQuery, то сделать это:

$("li.selected span").css("background" : "#FF4D6E", "color" : "#fff"); 

$("li.selected:first-child span").css("border-radius" : "30px"); 

$("li.selected:last-child span").css("border-radius" : "30px"); 

Answer 3

Чтобы сделать это, я рекомендую несколько часов, чтобы узнать, JQuery. Here - ссылка на хороший учебник jquery. Вы можете закончить этот учебник примерно через три часа.

JQuery позволяет динамически выбирать любой элемент, который вы хотите, и изменять его практически так, как вы можете себе представить.

Это код, который я хотел бы использовать для изменения CSS первых и последних пролетных элементов с .selected родителями:

var $childOfSelected = $('.selected').children('span') 

$childOfSelected.last().css({'border-radius':'30px'}); 
$childOfSelected.first().css({'border-radius':'30px'}); 

Answer 4

Для первого ребенка вы можете использовать этот

li.selected span { 
 
    background: #FF4D6E; 
 
    color: white; 
 
} 
 
.selected:first-child, 
 
:not(.selected) + .selected span { 
 
    border-radius: 30px; 
 
}

<ul> 
 
    <li> 
 
     <span>not</span> 
 
    </li> 
 
    <li class="selected"> 
 
     <span>selected</span> 
 
    </li> 
 
    <li class="selected"> 
 
     <span>selected</span> 
 
    </li> 
 
    <li class="selected"> 
 
     <span>selected</span> 
 
    </li> 
 
    <li> 
 
     <span>not</span> 
 
    </li> 
 
</ul>