Posso segmentar todas as tags <H> com um único seletor?


154

Gostaria de segmentar todas as tags h em uma página. Eu sei que você pode fazer assim ...

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

mas existe uma maneira mais eficiente de fazer isso usando seletores CSS avançados? por exemplo, algo como:

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

(mas obviamente isso não funciona)


8
Isto torna-se cada vez mais tedioso ao selecionarh1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, ...
Vortico

Respostas:


128

Não, uma lista separada por vírgula é o que você deseja neste caso.


14
Para quem chega aqui do google e quer saber o que significa uma lista separada por vírgula no CSS, é o primeiro exemplo que o OP deu. Isto é h1, h2, h3 {}.
Bluesmonk 29/05/19

44

Não é um CSS básico, mas se você estiver usando LESS ( http://lesscss.org ), poderá fazer isso usando a recursão:

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

O Sass ( http://sass-lang.com ) permitirá que você gerencie isso, mas não permitirá recursão; eles têm @forsintaxe para essas instâncias:

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

Se você não estiver usando uma linguagem dinâmica que seja compilada para CSS como LESS ou Sass, verifique definitivamente uma dessas opções. Eles podem realmente simplificar e tornar mais dinâmico seu desenvolvimento de CSS.


12
Eu tenho certeza que digitando manualmente do que criando um loop para CSS como h1, h2, h3 ... leva menos tempo, espaço ... mais claro para entender agora e mais tarde.
Muhammad Umer

¯_ (ツ) _ / ¯ "can" != "should". Mesmo assim, as opções Sass / LESS oferecem extensibilidade que o CSS baunilha não oferece. Pense em algo como font-size: (48px / @index).
21416 Steve Steve

Tudo bem se melhor atender às suas necessidades. Conforme mencionado em um comentário anterior, se você, por algum motivo, precisar operar no índice em LESS ou Sass, essa abordagem permitirá que você o faça com facilidade. Sua implementação pode ser dinâmica com base no número do cabeçalho.
27417 Steve Steve

Para as pessoas que não querem se integrar scss/sassao projeto, mas querem gerar csscom scss/sasselas, podem usar esta ferramenta on-line chamada sassmeister
Sameer Khan

37

Se você estiver usando o SASS, também poderá usar este mixin:

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

Use-o assim:

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

Editar: minha maneira favorita pessoal de fazer isso, estendendo opcionalmente um seletor de espaço reservado em cada um dos elementos de cabeçalho.

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

Então, eu posso segmentar todos os títulos como se fosse uma classe única, por exemplo:

.element > %headings {
    color: red;
}

É um passo muito pequeno de SCSS para SCSS + Compass: compass-style.org/reference/compass/helpers/selectors - headings ($ from, $ to)
Imperative

1
Uau, me deparei com isso dois anos depois .. e a edição parece dourada! Tenho certeza de que entendo o propósito da !optionalbandeira na extensão? E não consigo encontrar nada no google ...
Bill



3

O seletor jQuery para todas as tags h (h1, h2 etc) é ": header". Por exemplo, se você quiser deixar todas as tags h de cor vermelha com o jQuery, use:

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


você pode segmentar todos os títulos somente dentro de uma div específica? por exemplo $('.my_div :header').css("color","red")?
user1063287 10/07

1

Para resolver isso com CSS baunilha, procure padrões nos ancestrais dos h1..h6elementos:

<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 você conseguir identificar padrões, poderá escrever um seletor direcionado para o que deseja. Dado o exemplo acima todos os h1..h6elementos podem ser alvo de combinar o :first-childe :notpseudo-classes de CSS3, disponível em todos os navegadores modernos, assim:

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

No futuro, seletores avançados de pseudo-classe como :has()e combinadores de irmãos subsequentes ( ~) fornecerão ainda mais controle à medida que os padrões da Web continuarem evoluindo ao longo do tempo.


1

Você também pode usar o PostCSS e o plug-in de seletores personalizados

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

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

Resultado:

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

1

Você pode classificar todos os títulos em Seu documento se desejar direcioná-los com um único seletor, da seguinte maneira:

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

e no css

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

Não estou dizendo que essa é sempre uma prática recomendada, mas pode ser útil e, para direcionar a sintaxe, é mais fácil de várias maneiras,

portanto, se você der a todos os h1 a h6 a mesma classe .heading no html, poderá modificá-los para qualquer documento html que utilize essa folha de css.

upside, controle mais global versus "seção div artigo h1, etc {}",

desvantagem, em vez de chamar todos os seletores no lugar no css, você terá muito mais digitação no html, mas acho que ter uma classe no html para segmentar todos os títulos pode ser benéfico, apenas tenha cuidado com a precedência no css, porque conflitos podem surgir de


Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.