ページ上のすべてのhタグをターゲットにしたい。私はあなたがこのようにそれを行うことができることを知っています...

h1,
h2,
h3,
h4,
h5,
h6 {
  font: 32px/42px trajan-pro-1,trajan-pro-2;
}

しかし、高度なCSSセレクターを使用してこれを行うより効率的な方法はありますか？例：

[att^=h] {
  font: 32px/42px trajan-pro-1,trajan-pro-2;
}

（しかし、これは明らかに機能しません）

いいえ、この場合は、コンマ区切りのリストが必要です。

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

.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）ではこれを管理できますが、再帰は許可されません。@forこれらのインスタンスには構文があります。

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

LESSやSassなどのCSSにコンパイルする動的言語を使用していない場合は、これらのオプションのいずれかを必ずチェックしてください。彼らは本当にCSSの開発を簡素化し、よりダイナミックにすることができます。

SASSを使用している場合は、次のミックスインも使用できます。

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

次のように使用します。

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

編集：オプションで、各見出し要素のプレースホルダーセレクターを拡張することにより、これを行う私の個人的なお気に入りの方法。

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

次に、単一のクラスをターゲットにするように、すべての見出しをターゲットにすることができます。次に例を示します。

.element > %headings {
    color: red;
}

SCSS + Compassは、プリプロセッサについて話しているので、これを簡単にします。

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

ここですべてのコンパスヘルパーセレクターについて学ぶことができます：

スタイラスのセレクター補間

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

すべてのhタグ（h1、h2など）のjQueryセレクターは "：header"です。たとえば、jQueryですべてのhタグを赤にしたい場合は、次のようにします。

$(':header').css("color","red")

バニラCSSでこれに取り組むには、h1..h6要素の祖先のパターンを探します。

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

パターンを見つけることができれば、必要なものをターゲットとするセレクターを作成できる可能性があります。上記の例を考えると、すべてのh1..h6要素は、CSS3の:first-childおよびの:not疑似クラスを組み合わせることでターゲットにすることができます。

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

のような将来の高度な疑似クラスセレクター:has()、および後続の兄弟コンビネーター（~）は、Web標準が時間とともに進化し続けるため、さらに多くの制御を提供します。

PostCSSとカスタムセレクタプラグインを使用することもできます

@custom-selector :--headings h1, h2, h3, h4, h5, h6;

article :--headings {
  margin-top: 0;
}

出力：

article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
  margin-top: 0;
}

次のように、単一のセレクターでそれらをターゲットにする場合は、ドキュメントのすべての見出しを.classできます。

<h1 class="heading">...heading text...</h1>
<h2 class="heading">...heading text...</h2>

そしてCSSで

.heading{
    color: #Dad;
    background-color: #DadDad;
}

これが常にベストプラクティスであると言っているわけではありませんが、構文を対象とする場合に便利であり、多くの点で簡単です。

したがって、h1からh6までのすべてに同じ.headingクラスをhtmlで指定すると、そのcssシートを利用する任意のhtmlドキュメント用にそれらを変更できます。

逆に、「セクションdiv記事h1など{}」と比較して、よりグローバルな制御

欠点は、CSSのすべてのセレクターを呼び出す代わりに、HTMLでより多くの入力を行うことになりますが、すべての見出しをターゲットにするためにHTMLにクラスを含めると効果的であることがわかります。 css、競合が発生する可能性があるため

新しい:is()CSS疑似クラスは、1つのセレクターでそれを実行できます。

:is(h1, h2, h3, h4, h5, h6) {
  color: red;
}