2017-02-06 1 views
0

Я пытаюсь внести поправки в некоторые CSS, которые в основном будут выполняться только в том случае, если это НЕ первый из его типов с использованием CSS - следующие работы, но отображаются для всех селекторы?CSS-селектор для добавления содержимого 'before', где он НЕ является первым селектором

.networks-body.all .facebook.interaction-container::before 
{ 
    content: "\f09a"; 
    margin-right: 2px; 
} 
+0

Я думаю, что вы ищете ': нет (: первого ребенка)' – cyrix

ответ

3

пытаются цепи :not(:first-of-type) перед pseudoclass ::before

.facebook.interaction-container:not(:first-of-type)::before { 
    ...  
} 
+0

Также проверьте следующее: http://stackoverflow.com/ Вопросы/2717480/css-selector-for-first-element-with-class –

+0

Да, да, действительно ': first-of-type' привязан к элементу независимо от класса, как объяснено в нескольких ответах на SO, но в этом контексте этот класс является единственной доступной информацией, которую я знаю, чтобы ориентировать элемент. – fcalderan

+1

да от. Это было просто добавление. Автор не дал слишком много информации на самом деле –

0

Edit: ответ fcalderan является чище;)

Вы можете добавить PREPEND ВСЕЙ элемента, и чем удалить его из в первую очередь:

.networks-body.all .facebook.interaction-container::before{ 
    content: "\f09a"; 
    margin-right: 2px; 
} 

.networks-body.all .facebook.interaction-container:first-of-type::before{ 
    content: none; 
} 

Пример: https://jsfiddle.net/mfge1or3/

0

Здесь вы можете использовать nth-of-type(1n+1), оставив в то же время ::before в конце.

В скобках, 1n, означает выбор каждого экземпляра, в то время как +2 означает начать со второго экземпляра. Другими словами, выберите все экземпляры , за исключением.

.facebook.interaction-container:nth-of-type(1n+2)::before { 
    content: "\f09a"; 
    margin-right: 2px; 
} 

Пример:

li:nth-of-type(1n+2)::before { 
 
    content: 'A'; 
 
    color: red; 
 
}
<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
</ul>

Смежные вопросы