CSS Target Tutti i tag H

Question

Mi piacerebbe indirizzare tutti gli elementi h1..h6 su una pagina. So che puoi farlo in questo modo ...

h1, h2, h3, h4, h5, h6 { 
    font-size: 1.2em; 
} 

Questo può essere ottenuto utilizzando CSS3 o CSS4? Ad esempio:

[att^=h] { 
    font-size: 1.2em; 
} 

Se non possibile con CSS3 o 4, quali sono alcune alternative creative?

Answer 1

No, un elenco separato da virgole è ciò che si desidera in questo caso.

Answer 2

Non è css di base, ma se si sta utilizzando meno (http://lesscss.org), si può fare questo usando la ricorsione:

.hClass (@index) when (@index > 0) { 
    h@{index} { 
     font: 32px/42px trajan-pro-1,trajan-pro-2; 
    } 
    .hClass(@index - 1); 
} 
.hClass(6); 

Sass (http://sass-lang.com) vi permetterà di gestire questo, ma non permettete ricorsione; hanno @for sintassi per questi casi:

@for $index from 1 through 6 { 
    h#{$index}{ 
    font: 32px/42px trajan-pro-1,trajan-pro-2; 
    } 
} 

Se non si utilizza un linguaggio dinamico che compila a CSS come minore o Sass, si dovrebbe verificare una di queste opzioni. Possono davvero semplificare e rendere più dinamico lo sviluppo dei CSS.

Answer 3

Se stai usando SASS si potrebbe anche usare questo mixin:

@mixin headings { 
    h1, h2, h3, 
    h4, h5, h6 { 
     @content; 
    } 
} 

Utilizzare in questo modo:

@include headings { 
    font: 32px/42px trajan-pro-1, trajan-pro-2; 
} 

---

Edit: Il mio modo preferito di fare questo estendendo facoltativamente un selettore di segnaposto su ciascuno degli elementi di titolo.

h1, h2, h3, 
h4, h5, h6 { 
    @extend %headings !optional; 
} 

allora posso indirizzare tutte le linee di come vorrei indirizzare una singola classe, ad esempio:

.element > %headings { 
    color: red; 
} 

Answer 4

SCSS + bussola rende questo un gioco da ragazzi, dal momento che stiamo parlando di pre-processori.

#{headings(1,5)} { 
    //definitions 
    } 

You can learn about all the Compass helper selectors here:

Answer 5

Stylus s' selector interpolation

for n in 1..6 
    h{n} 
    font: 32px/42px trajan-pro-1,trajan-pro-2; 

Answer 6

Per affrontare questo con vaniglia sguardo CSS per i modelli agli antenati dei h1..h6 elementi:

<section class="row"> 
    <header> 
    <h1>AMD RX Series</h1> 
    <small>These come in different brands and types</small> 
    </header> 
</header> 

<div class="row"> 
    <h3>Sapphire RX460 OC 2/4GB</h3> 
    <small>Available in 2GB and 4GB models</small> 
</div> 

Se può individuare il modello s potresti essere in grado di scrivere un selettore che bersaglia ciò che vuoi.Dato l'esempio sopra tutti h1..h6 elementi possono essere presi di mira combinando le :first-child e :not pseudo-classi da CSS3, disponibile in tutti i browser moderni, in questo modo:

.row :first-child:not(header) { /* ... */ } 

In futuro selettori di pseudo-classe avanzate come :has(), e subsequent-sibling combinators (~), fornirà un controllo ancora maggiore man mano che gli standard Web continueranno ad evolversi nel tempo.