Ciao, cari lettori! Continuando l'argomento dei selettori CSS, voglio portare alla vostra attenzione descrizione dei selettori figlio e di contesto, così come la loro analisi comparativa, poiché secondo la logica di applicazione sono molto simili, sebbene presentino alcune differenze.
Nelle mie pubblicazioni mi sono soffermato qualche dettaglio su vari tipi Selettori CSS: ; così come . A proposito, nell'ultimo articolo, dove abbiamo discusso diversi tipi selettore di attributi, ho descritto in dettaglio come i miei calcoli teorici possono essere immediatamente testati apportando modifiche al codice HTML e CSS online utilizzando lo strumento integrato Google Cromo(). Tali strumenti di modifica dispongono delle ultime modifiche di tutti i browser più diffusi, incluso il plug-in Firebug per Firefox ().
Puoi anche studiare il materiale teorico in questo post modificando qualsiasi pagina di qualsiasi sito web! Per fare ciò, basta premere F12 se utilizzi Google Chrome o MozillaFirefox(). Ora presenterò il contenuto del tag p, utilizzandolo come esempio selettori CSS secondari e contestuali:
Questo paragrafo include em e tag di formattazione forte che evidenziano il testo grassetto E corsivo.
Utilizzando lo strumento di modifica sopra descritto, ho inserito questo paragrafo direttamente in questo articolo, inserendo il testo appropriato sul lato sinistro della finestra di modifica, in conseguenza del quale il testo di questo paragrafo è apparso nella parte superiore della pagina:
Questo costrutto HTML, . Questo paragrafo sarà un argomento di prova nella pubblicazione di oggi; utilizzando il suo esempio, mostrerò come cambia il design del suo testo, a seconda di quali selettori - secondari o contestuali - vengono utilizzati nella regola CSS.
Un elemento figlio è un elemento che si trova direttamente all'interno del suo genitore.. Prima di procedere direttamente all'argomento, fornirò un'immagine che riflette la gerarchia dei tag in Documento HTML usando l’esempio del paragrafo il cui testo è riportato sopra e che analizzeremo oggi:
Questo disegno è anche chiamato albero degli elementi. Questa figura mostra chiaramente la nidificazione dei contenitori, che suggerisce relazioni gerarchiche tra i tag. Il tag di paragrafo p è figlio di . Allo stesso tempo, il tag strong non è figlio del div, poiché si trova nel contenitore p.
Selettore CSS secondario
Un selettore figlio in un albero di elementi si trova sempre direttamente all'interno dell'elemento genitore, in questo caso la sintassi per scrivere un selettore CSS sarebbe la seguente:
Lo stile verrà applicato al Selettore 2, ma solo se è figlio del Selettore 1. Esaminiamolo più in dettaglio utilizzando lo screenshot sopra dell'albero degli elementi. Ad esempio, seguendo la sintassi, puoi impostare una regola come questa:
P> em (colore: verde;)
Questa regola farà sì che l'ultima parola del paragrafo sia “in corsivo”, poiché è ciò che è racchiuso tra i tag em di apertura e chiusura. Il tag em è figlio di p perché è posto direttamente al suo interno, quindi il testo del contenuto, ovvero la parola “corsivo”, sarà colorato di verde.
Tuttavia, l’altro tag em non è un discendente diretto del tag p, poiché fa parte del tag strong, per cui la parte “tag di formattazione em e strong” del paragrafo non verrà colorata.
Selettore CSS contestuale
È ora di capirlo cos'è un selettore contestuale CSS. Quando si struttura una determinata pagina su un sito Web, i tag sono spesso annidati uno dentro l'altro. Affinché gli stili di tali elementi funzionino correttamente, vengono utilizzati selettori che agiscono in un determinato contesto, da cui il nome.
Se per poter applicare una regola CSS, il selettore figlio deve essere posizionato direttamente all'interno dell'elemento genitore (il primo livello di nidificazione), allora per il selettore di contesto questo è completamente irrilevante e qualsiasi livello di nidificazione può essere applicato, le proprietà della regola CSS l'elemento verrà comunque trasferito dal genitore. La sintassi è questa:
Come puoi vedere, un selettore di contesto è costituito da semplici selettori separati da uno spazio. Per i selettori contestuali è consentito utilizzare due o più tag nidificati. Creiamo ora una regola CSS per il paragrafo in prova, che ho citato sopra:
P em (colore: verde;)
Come puoi vedere, non solo il testo di parte del contenuto del paragrafo, che è racchiuso direttamente nel tag di formattazione em, cioè la parola "corsivo", è colorato di verde, ma anche una sezione del testo di un altro tag em , che fa anche parte del tag forte. Ciò è accaduto perché esiste una regola con un selettore di contesto, per la quale il livello di annidamento non è importante, a differenza del selettore figlio. Questa è la differenza fondamentale tra un bambino e un selettore di contesto.
Diamo un'occhiata a un altro esempio di come i selettori contestuali e secondari interagiscono con il nostro paragrafo. Scriviamo le seguenti regole CSS per il selettore figlio e contesto:
Div em (colore: rosso;) p> em (colore: verde;)
Successivamente, il nostro paragrafo assume il seguente disegno:
Come puoi vedere, una porzione di testo racchiusa tra i tag em e strong è colorata di rosso perché per essa vale la regola del selettore di contesto, ovvero il tag em è racchiuso nei contenitori strong e div, e il livello di nidificazione, come già notato , non importa.
Sorge la domanda: perché la parola “corsivo”, che è anche il contenuto di em, è colorata di verde? Dopotutto, la regola della selezione del contesto è rilevante anche per lui. Ma per questa sezione del testo del paragrafo è valida anche la regola del selettore figlio, perché non contraddice la condizione secondo cui per un selettore figlio l'elemento deve essere incluso direttamente nel tag p.
Il fatto è che nei CSS esiste una legge di precedenza per le proprietà CSS situate di seguito. Cioè, in questo caso, la regola del selettore figlio si trova più in basso nel documento rispetto a Stili CSS, scritto per il selettore di contesto del contenitore div. Pertanto, la parola “corsivo” è diventata verde. Se li inverti, la regola “p> em (colore: verde;)” non si applica più e la sezione “corsivo” del testo sarà rossa.
Vlad Merzhevich
Un elemento figlio è un elemento che si trova direttamente all'interno di un elemento genitore. Per comprendere meglio le relazioni tra gli elementi del documento, diamo un'occhiata a un piccolo codice (esempio 12.1).
Esempio 12.1. Nidificazione di elementi in un documento
HTML5 CSS 2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
IN in questo esempio Vengono utilizzati più contenitori, che nel codice si trovano uno dentro l'altro. Ciò può essere visto più chiaramente nell'albero degli elementi, che è il nome dato alla struttura delle relazioni tra i tag del documento (Fig. 12.1).
Riso. 12.1. Esempio di albero degli elementi
Nella fig. La Figura 12.1 presenta la nidificazione degli elementi e la loro gerarchia in una forma conveniente.
sporge l'etichetta Tuttavia, l'etichetta , poiché si trova in un contenitore Torniamo ora ai selettori. Un selettore figlio è quello che si trova direttamente all'interno dell'elemento genitore nell'albero degli elementi. La sintassi per l'utilizzo di tali selettori è la seguente. Selettore 1 > Selettore 2 (Descrizione regole di stile) Lo stile viene applicato al Selettore 2, ma solo se è figlio del Selettore 1. Facendo riferimento all'Esempio 12.1, lo stile di vista P > EM ( color: red ) verrebbe impostato sul primo paragrafo del documento perché il tag è all'interno del contenitore E non darà alcun risultato per il secondo paragrafo. E tutto perché il tag nel secondo paragrafo si trova in un contenitore , quindi la condizione di nidificazione è violata. Nella loro logica, i selettori figli sono simili ai selettori di contesto. La differenza tra loro è la seguente. Un selettore figlio ha uno stile solo se è un figlio diretto, ovvero direttamente all'interno dell'elemento genitore. Per un selettore di contesto, è consentito qualsiasi livello di annidamento. Per rendere più chiaro di cosa stiamo parlando, diamo un'occhiata al codice seguente (esempio 12.2). HTML5 CSS 2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet Selettori bambini , consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna Aliguam erat volutpat. Il risultato di questo esempio è mostrato in Fig. 12.2. Riso. 12.2. Colore del testo impostato utilizzando un selettore figlio Per taggare nell'esempio operano contemporaneamente due regole: selettore di contesto (tag è una filiale di Tieni presente che nella maggior parte dei casi puoi evitare di aggiungere selettori secondari sostituendoli con selettori di contesto. Tuttavia, l'uso dei selettori secondari espande la capacità di controllare gli stili degli elementi, consentendo in definitiva di ottenere il risultato desiderato, oltre a un codice semplice e chiaro. È più conveniente utilizzare questi selettori per elementi che hanno una struttura gerarchica, inclusi, ad esempio, tabelle e vari elenchi. L'Esempio 12.3 mostra come modificare l'aspetto di una lista utilizzando gli stili. Annidando un elenco in un altro otteniamo un tipo di menu. In questo caso, i titoli si trovano orizzontalmente e l'insieme dei collegamenti si trova verticalmente sotto i titoli (Fig. 12.3). Riso. 12.3. Elenco come menu Per posizionare il testo orizzontalmente, la proprietà dello stile float viene aggiunta al selettore LI. Per separare lo stile di una lista orizzontale e verticale, vengono utilizzati selettori figli (esempio 12.3). HTML5 CSS 2.1 IE Cr Op Sa Fx
Grande Domande da verificare 1. Di che colore sarà il testo in grassetto corsivo nel codice? Si basano gli standard di illuminazione sulla base della classificazione del lavoro visivo secondo determinate caratteristiche quantitative. Quando si utilizza il seguente stile? Giallo. Paragrafo 1. Paragrafo 2.
In questo esempio, i selettori secondari devono separare lo stile degli elementi dell'elenco di livello superiore e degli elenchi nidificati, che servono a scopi diversi, quindi il loro stile non dovrebbe sovrapporsi.
P (colore: verde;)
B (colore: blu;)
Io (colore: arancione; )
B > I (colore: oliva;)