Selettore CSS: primo div all'interno di un id o classe

Question

Qual è il selettore CSS corretto per selezionare il primo div all'interno di una classe o con un ID specifico? Questo sembra essere molto più semplice con elementi padre/figlio ma non ho trovato nulla per elementi semplici.

Update: soluzione

la soluzione più pulita, più compatibile ho trovato è stato .class ~ .class che seleziona tutte le ultime classi che seguono il primo della classe. Ad esempio, se si vuole rimuovere il bordo superiore dal primo elemento all'interno della sua classe si farebbe:

<style> 
    .dolphin { 
     border-top:0; 
     } 
    .dolphin ~ .dolphin { 
     border-top:1px solid #000; 
     } 
</style> 

Answer 1

Se si desidera selezionare il primo div all'interno di una specifica classe, allora si può usare:

.class div:first-child 

Questo però non funziona quando hai il seguente codice HTML:

<div class="class"> 
    <h1>The title</h1> 
    <div>The CSS won't affect this DIV</div> 
</div> 

Non funzionerà perché il div non è il primo figlio del .class.Se wan't a bersaglio che div in questo caso suggerirei di aggiungere un altro contenitore (o l'aggiunta di una classe a quella div ciò che ti piace :))

Answer 2

si può usare

.class div:first-child{ your css }

Answer 3

Basta utilizzare l'ID - Dovrebbe essere unica per pagina e quindi si sa esattamente cosa voce che si sta effettuando

Answer 4

per selezionare la prima div in una classe mi consiglia di utilizzare questo metodo

.yourClassName > div:first-child{ 
    // Your properties 
} 

stesso se si desidera selezionare all'interno di un id solo fare questo

#yourUniqueId > div:first-child{ 
    // Your properties 
} 

ma se si dispone di un ID vostra dovrebbe SOLO avere uno comunque altrimenti si sarebbe la codifica valido HTML , basta usare un selettore semplice come questo per di id

#yourID{ 
    // Your Properties 
} 

notare anche, che nella risposta @ di codice sorgente questo non lo fa attualmente avere la> nel suo esempio senza questo non selezionerà il primo div all'interno di una classe, ma sarà piuttosto selezionare ogni primo div all'interno di tale assegno classe questo violino fuori per un esempio di che

Demo First Selector from each group

ed ecco un demo della mia risposta

Demo First Selector ONLY

Answer 5

È possibile utilizzare le seguenti classi: pseudo

1. : first-child
2. : nth-child (1)

In alternativa è possibile selezionare da ID:

1. #elementID
2. div [id = ""] elementID

La differenza tra i due precedenti è di specificità; l'uso di "#elementID" avrebbe una specificità più alta (precedenza) rispetto all'utilizzo del selettore di attributo "div [id =" elementID "] ma entrambi sono modi corretti per selezionare l'elemento