web-dev-qa-db-ja.com

1つのセレクターですべての<H>タグをターゲットにできますか？

ページ上のすべての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;
}

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

csscss3css-selectors
135
SparrwHawk

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

102
Dave Markle

基本的な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の開発を本当に簡素化し、より動的にすることができます。

42
Steve

SASSを使用している場合は、次のmixinも使用できます。

@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;
}
32
Ben Fleming

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

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

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

6
Imperative

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

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

これにVanilla 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>

パターンを見つけることができれば、あなたが望むものをターゲットとするセレクタを書くことができるかもしれません。上記の例では、CSS3の h1..h6 および :first-child 擬似クラスを組み合わせることで、すべての:not要素をターゲットにすることができます。

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

将来的には :has() や 後継兄弟コンビネーター （~）などの高度な擬似クラスセレクターは、Web標準が時間とともに進化し続けるにつれて、さらに多くの制御を提供します。

1
Josh Habdas

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

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

そしてCSSで

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

これが常にベストプラクティスであると言っているわけではありませんが、便利な場合があります。

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

逆に、「セクションdiv記事h1など{}」に対するよりグローバルな制御、

欠点は、すべてのセレクターをcssの所定の場所で呼び出す代わりに、htmlをより多く入力することですが、すべての見出しを対象とするhtmlのクラスがあることは有益であることがわかります。 css、競合が発生する可能性があるため

1
DennisWPaulsenJR

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

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

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;
}
0
Mattia Astorino