: pseudo-classe last-child mista con selettore di attributo non funzionante

Sto provando a selezionare il primo e l'ultimo figlio di un elemento con un attributo specifico data-.: pseudo-classe last-child mista con selettore di attributo non funzionante

Il selettore :first-child funziona correttamente, ma :last-child non funziona. Seriamente non so cosa possa causare questo. Ho controllato gli errori di battitura.

CSS

.element[data-type='element']:first-child { 
    padding-left: 0; 
    background-color:red !important 
} 

.element[data-type='element']:last-child { 
    padding-right: 0; 
    border-right:0; 
    background-color:red !important; 
}

fonte

2014-09-19 UserDy

A seconda del resto della struttura HTML, è possibile avere maggiore fortuna con [': first-of-type'] (https://developer.mozilla.org/en-US/docs/Web/CSS/: first-of-type) e [': last-of-type'] (https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type). – showdev

È necessario inserire un punto e virgola dopo "! Important" nel selettore ** first-child **. Non sta influenzando quel selettore (dato che è l'ultima regola) ma potrebbe influenzare il prossimo. – worldofjr

Nessuna fortuna. Ho cambiato: first e: last child to: first-of-type e: last-of-type ma è sempre lo stesso problema. Ho anche aggiunto il punto e virgola, ma questo non lo ha risolto. – UserDy

sto cercando di selezionare il primo e l'ultimo figlio di un elemento con uno specifico data- attributo.

In conclusione, non c'è modo di farlo in CSS.

last-child (e last-of-type) significa, bene "ultimo figlio", e "ultimo figlio di tipo", fanno non significa "ultimo figlio corrispondenza dell'intero selettore compreso un selettore di attributo". Nel tuo caso, è probabile che il terzo div non sia effettivamente l'ultimo figlio (o non l'ultimo div) all'interno dell'elemento genitore; è impossibile dirlo a meno che tu non mostri l'intero codice HTML compreso l'elemento genitore e tutti i suoi figli.

fonte

2014-09-19 02:21:59

: pseudo-classe last-child mista con selettore di attributo non funzionante

risposta

Problemi correlati