CSS Objetivo Todas las etiquetas H

Question

Me gustaría orientar todos los elementos h1..h6 en una página. Sé que puedes hacerlo de esta manera ...

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

¿Se puede lograr esto con CSS3 o CSS4? Por ejemplo:

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

Si no es posible con CSS3 o 4, ¿cuáles son algunas alternativas creativas?

Answer 1

No, una lista separada por comas es lo que desea en este caso.

Answer 2

No es CSS básico, pero si usted está utilizando menos (http://lesscss.org), puede hacerlo utilizando la recursividad:

.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) le permitirá gestionar esto, pero no lo permiten recursión; tienen @for sintaxis de estos casos:

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

Si usted no está usando un lenguaje dinámico que compila a CSS como menos o Sass, que debería salir una de estas opciones. Realmente pueden simplificar y dinamizar su desarrollo de CSS.

Answer 3

Si está utilizando SASS también se podría utilizar este mixin:

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

usarlo como así:

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

---

Editar: Mi manera favorita de hacer esto extendiendo opcionalmente un selector de marcador de posición en cada uno de los elementos de encabezado.

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

Entonces me puede orientar todas las partidas como que estaría dirigido a cualquier clase única, por ejemplo:

.element > %headings { 
    color: red; 
} 

Answer 4

SCSS + brújula hace que este muy fácil, ya que estamos hablando de pre-procesadores.

#{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

Para hacer frente a esto con mirada CSS vainilla patrones en los antepasados ​​de los h1..h6 elementos:

<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> 

Si puede detectar el patrón s usted puede escribir un selector que se dirija a lo que desea.Teniendo en cuenta el ejemplo anterior todos h1..h6 elementos pueden ser el blanco de la combinación de los :first-child y :not pseudo-clases de CSS3, disponible en todos los navegadores modernos, así:

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

En el futuro los selectores avanzados de la clase de pseudo como :has(), y subsequent-sibling combinators (~), proporcionará aún más control a medida que los estándares web continúen evolucionando con el tiempo.