CSSターゲットすべてのHタグ

Question

すべてのh1..h6要素をページにターゲティングしたいと思います。私はあなたがこのようにすることができることを知っています...

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

これはCSS3またはCSS4を使用して達成できますか？例：

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

CSS3または4ではできない場合は、いくつかの創造的な選択肢はありますか？

Answer 1

いいえ、カンマで区切られたリストは、この場合に必要なものです。

Answer 2

それは基本的なCSSのではないのですが、あなたは（http://lesscss.org）LESSを使用している場合、あなたはこの使用して再帰を行うことができます。

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

サス（http://sass-lang.com）あなたがこれを管理できるようになりますが、許可されません再帰;

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

あなたがLESSやSassのようなCSSにコンパイル動的言語を使用していない場合は、あなたは間違いなく、これらのオプションのいずれかをチェックアウトする必要があります：彼らは、これらのインスタンスの@for構文を持っています。彼らはCSS開発をより単純化し、よりダイナミックにすることができます。あなたはSASSを使用している場合

Answer 3

あなたもこのミックスインを使用することができます。

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

---

編集：これを行うための私の個人的な好みの方法

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

はそうのようにそれを使用します各見出し要素上のプレースホルダセレクタをオプションで拡張することによって、

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

私は、たとえば、任意の単一のクラスを標的とするようにその後、私はすべての見出しをターゲットにすることができます：私たちは事前にプロセッサの話をしているので、コンパスは、このスナップになり

.element > %headings { 
    color: red; 
} 

Answer 4

SCSS +を。

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

You can learn about all the Compass helper selectors here：

Answer 5

Stylusさんselector interpolation

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

Answer 6

h1..h6要素の祖先のパターンのためのバニラCSSの表情でこれに取り組むには：

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

あなたの場合パターンを見つけることができるあなたが望むものをターゲットとするセレクタを書くことができるかもしれません。:has()のような将来の高度な擬似クラスセレクタで

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

、および：そうのように、すべての最新ブラウザでは、利用可能なすべてのh1..h6要素がCSS3から:first-childと:not擬似クラスを組み合わせることにより、標的とすることができる上記の例を考えます（~）は、Web標準が時間の経過とともに進化し続けるにつれて、さらに制御を提供します。