2011-12-16 18 views
14

Se questo lavoro sto diventando pazzo?first-child not working

.project.work:first-child:before { 
 
    content: 'Projects'; 
 
} 
 
.project.research:first-child:before { 
 
    content: 'Research'; 
 
}
<div class="project work"> 
 
    <p>abcdef</p> 
 
</div> 
 
<div class="project work"> 
 
    <p>abcdef</p> 
 
</div> 
 
<div class="project work"> 
 
    <p>abcdef</p> 
 
</div> 
 
<div class="project research"> 
 
    <p>abcdef</p> 
 
</div>

projects:first-child funziona bene, research:first-child non si attacca. Qualche idea?

Demo Non funziona, ma qual è il modo migliore per raggiungere questo obiettivo?

+2

': first-child' seleziona solo il primo bambino. Nient'altro. – BoltClock

+0

.project.research: first-child Non è il primo del suo genere? – uriah

+0

Lo è, ma non è il primo figlio di un genitore. – BoltClock

risposta

14

:first-child seleziona solo il primo figlio del relativo genitore. Nient'altro.

Come menzionato in alcuni dei miei altre risposte sul sito (1234), non v'è alcuna :first-of-class pseudo-classe. Se stai cercando di applicare gli stili al primo di ogni classe degli elementi div, una soluzione consiste nell'applicare gli stili a tutti i bambini di quella classe e un selettore di pari livello generale per annullare gli stili dai fratelli successivi.

tuo CSS sarebbe quindi simile a questa:

.project.work:before { 
    content: 'Work'; 
} 

.project.research:before { 
    content: 'Research'; 
} 

.project.work ~ .project.work:before, 
.project.research ~ .project.research:before { 
    content: none; 
} 
+0

Non c'è un modo in puro CSS per applicarlo dinamicamente (cioè senza dover codificare le classi extra se si decide di aggiungerne altre in seguito), comunque. Dopo aver aggiunto più classi, devi aggiungerle manualmente al tuo CSS in questo modello. – BoltClock

+0

Perfetto, si applica a tutti e annullare i fratelli. Grazie @boltclock Quindi se io aggiungo un'altra classe come '.project.photography', non funzionerà? – uriah

+0

@uriah: Funzionerà, devi solo aggiungerlo manualmente. – BoltClock

1

Dal specification:

Uguale :nth-child(1). La pseudo-classe :first-child rappresenta un elemento che è il primo figlio di qualche altro elemento.

.project.research non è il primo figlio di un genitore.

0

credo si desidera che questo CSS:

.project.work p:first-child:before {content:'Projects';} 
.project.research p:first-child:before {content:'Research';} 

o

.project.work > p:first-child:before {content:'Projects';} 
.project.research > p:first-child:before {content:'Research';} 

Updated fiddle

che corrisponde al primo figlio di un elemento con le classi "progetto" e "lavoro "(o" progetto "e" ricerca "). Non è necessario utilizzare p:first-child se non può essere un elemento p, è possibile utilizzare invece *:first-child.

+0

Grazie! Vorrei solo selezionare il primo del suo genere e applicare il CSS non ogni elemento. Questo seleziona tutti loro. – uriah

+0

@uriah: Ah. Non penso che tu possa farlo senza cambiare il tuo markup. Non penso che nemmeno i selettori CSS3 abbiano un modo di selezionare il primo elemento in un contenitore con una data coppia di nomi di classi. Anche ': first-of-type' si applica al tipo di elemento, indipendentemente dalla classe. –