Czy mogę kierować reklamy na wszystkie tagi <H> za pomocą jednego selektora?

155

Chciałbym kierować reklamy na wszystkie tagi h na stronie. Wiem, że możesz to zrobić w ten sposób ...

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

ale czy istnieje skuteczniejszy sposób na zrobienie tego za pomocą zaawansowanych selektorów CSS? np. coś takiego:

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

(ale oczywiście to nie działa)

SparrwHawk
źródło
8
Przy wyborze staje się to coraz bardziej uciążliweh1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, ...
Vortico,

Odpowiedzi:

128

Nie, w tym przypadku potrzebujesz listy oddzielonej przecinkami.

Dave Markle
źródło
14
Dla tych, którzy lądują tutaj z Google i zastanawiają się, co oznacza lista oddzielona przecinkami w CSS, jest to pierwszy przykład podany przez OP. To znaczy h1, h2, h3 {}.
bluesmonk
44

To nie jest podstawowy css, ale jeśli używasz LESS ( http://lesscss.org ), możesz to zrobić za pomocą rekurencji:

.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 ) pozwoli ci to zarządzać, ale nie pozwoli na rekursję; mają @forskładnię dla tych instancji:

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

Jeśli nie używasz dynamicznego języka, który kompiluje się do CSS, takiego jak LESS lub Sass, zdecydowanie powinieneś sprawdzić jedną z tych opcji. Mogą naprawdę uprościć i zdynamizować rozwój CSS.

Steve
źródło
12
Jestem prawie pewien, że ręczne wpisywanie niż tworzenie pętli for w CSS, takich jak h1, h2, h3 ... zajmuje mniej czasu, miejsca ... jest bardziej przejrzyste do zrozumienia teraz i później.
Muhammad Umer
¯_ (ツ) _ / ¯ "can" != "should". Mimo to opcje Sass / LESS zapewniają rozszerzalność, której nie ma w przypadku standardowego CSS. Pomyśl o czymś takim font-size: (48px / @index).
Steve,
Nie ma problemu, jeśli najlepiej odpowiada Twoim potrzebom. Jak wspomniano we wcześniejszym komentarzu, jeśli z jakiegoś powodu potrzebujesz operować na indeksie w LESS lub Sass, takie podejście pozwala ci to łatwo zrobić. Twoja implementacja może być dynamiczna na podstawie numeru nagłówka.
Steve
Osoby, które nie chcą integrować się scss/sassw swoim projekcie, ale chcą generować za jego csspomocą scss/sass, mogą skorzystać z narzędzia online o nazwie sassmeister
Sameer Khan
38

Jeśli używasz SASS, możesz również użyć tej mieszanki:

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

Użyj go w ten sposób:

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

Edycja: Mój ulubiony sposób na zrobienie tego poprzez opcjonalne rozszerzenie selektora zastępczego na każdy z elementów nagłówka.

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

Następnie mogę kierować reklamy na wszystkie nagłówki, tak jak w przypadku dowolnej pojedynczej klasy, na przykład:

.element > %headings {
    color: red;
}
Ben Fleming
źródło
To bardzo mały krok od SCSS do SCSS + Compass: compass-style.org/reference/compass/helpers/selectors - nagłówki ($ od, $ do)
tryb imperatywny
1
Wow, natknąłem się na to dwa lata później ... a edycja wygląda na złocistą! Jestem pewien, że rozumiem jednak cel tej !optionalflagi? I nie mogę znaleźć niczego w google ...
Bill
3

Stylus jest interpolacja selektor

for n in 1..6
  h{n}
    font: 32px/42px trajan-pro-1,trajan-pro-2;
laggingreflex
źródło
To nie działa. Przetestuj swój kod przed wysłaniem odpowiedzi, ponieważ jest to szkodliwe dla każdego, kto może spróbować go użyć. Twoja odpowiedź zredagowałem za pomocą przetestowanego i działającego kodu.
Hybrydowy programista internetowy
@Hybridwebdev Wydaje się, że dla mnie działa . Tak też opisują iterację
doktorzy
3

Selektor jQuery dla wszystkich znaczników h (h1, h2 itd.) To „: header”. Na przykład, jeśli chcesz, aby wszystkie znaczniki h miały kolor czerwony za pomocą jQuery, użyj:

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

Fabian Madurai
źródło
czy możesz kierować reklamy tylko na wszystkie nagłówki w określonym elemencie div? np. $('.my_div :header').css("color","red")?
user1063287
1

Aby poradzić sobie z tym za pomocą waniliowego CSS, poszukaj wzorów u przodków h1..h6elementów:

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

Jeśli potrafisz dostrzec wzorce, możesz napisać selektor, który celuje w to, co chcesz. Biorąc pod uwagę powyższy przykład, wszystkie h1..h6elementy mogą być kierowane przez połączenie :first-childi :notpseudoklasy z CSS3, dostępne we wszystkich nowoczesnych przeglądarkach, na przykład:

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

W przyszłości zaawansowane selektory pseudoklas, takie jak :has()i kolejne kombinatory rodzeństwa ( ~), zapewnią jeszcze większą kontrolę, ponieważ standardy sieciowe będą ewoluować w czasie.

Josh Habdas
źródło
1

Możesz także użyć PostCSS i wtyczki niestandardowych selektorów

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

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

Wynik:

article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
  margin-top: 0;
}
Mattia Astorino
źródło
1

Możesz .klasować wszystkie nagłówki w swoim dokumencie, jeśli chcesz kierować na nie jednym selektorem, w następujący sposób:

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

oraz w css

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

Nie twierdzę, że jest to zawsze najlepsza praktyka, ale może być przydatna, a do kierowania składni - na wiele sposobów łatwiejsza,

więc jeśli dasz wszystkim h1 do h6 tę samą klasę .heading w html, możesz je zmodyfikować dla dowolnych dokumentów html, które używają tego arkusza css.

plus, bardziej globalna kontrola w porównaniu z „sekcją div artykuł h1 itp. {}”,

minusem, zamiast wywoływać wszystkie selektory na miejscu w css, będziesz miał dużo więcej pisania w html, ale uważam, że posiadanie klasy w html do kierowania na wszystkie nagłówki może być korzystne, po prostu uważaj na pierwszeństwo w css, ponieważ konflikty mogą wynikać z

DennisWPaulsenJR
źródło
0

Nowa :is()pseudoklasa CSS może to zrobić w jednym selektorze:

:is(h1, h2, h3, h4, h5, h6) {
  color: red;
}
srebrny Wiatr
źródło