Can I target all H tags with a single selector

Question

I d like to target all h tags on a page  I know you can do it this way     h1  h2  h3  h4  h5  h6     font  32px 42px trajan-pro-1 trajan-pro-2      but is there a more efficient way of doing this using advanced CSS selectors  e g something like    att  h      font  32px 42px trajan-pro-1 trajan-pro-2       but obviously this doesn t work

User · Answer

SCSS Compass makes this a snap  since we re talking about pre-processors     headings 1 5           definitions       You can learn about all the Compass helper selectors here

User · Answer

It s not basic css  but if you re using LESS  http   lesscss org   you can do this using recursion    hClass   index  when   index  gt  0        h  index            font  32px 42px trajan-pro-1 trajan-pro-2             hClass  index - 1      hClass 6     Sass  http   sass-lang com  will allow you to manage this  but won t allow recursion  they have  for syntax for these instances    for  index from 1 through 6     h   index       font  32px 42px trajan-pro-1 trajan-pro-2          If you re not using a dynamic language that compiles to CSS like LESS or Sass  you should definitely check out one of these options  They can really simplify and make more dynamic your CSS development

User · Answer

No  a comma-separated list is what you want in this case

User · Answer

You can also use PostCSS and the custom selectors plugin   custom-selector  --headings h1  h2  h3  h4  h5  h6   article  --headings     margin-top  0      Output   article h1  article h2  article h3  article h4  article h5  article h6     margin-top  0

User · Answer

If you re using SASS you could also use this mixin    mixin headings       h1  h2  h3      h4  h5  h6            content            Use it like so    include headings       font  32px 42px trajan-pro-1  trajan-pro-2        Edit  My personal favourite way of doing this by optionally extending a placeholder selector on each of the heading elements   h1  h2  h3  h4  h5  h6        extend  headings  optional      Then I can target all headings like I would target any single class  for example    element  gt   headings       color  red

User · Answer

To tackle this with vanilla CSS look for patterns in the ancestors of the h1  h6 elements    lt section class  row  gt     lt header gt       lt h1 gt AMD RX Series lt  h1 gt       lt small gt These come in different brands and types lt  small gt     lt  header gt   lt  header gt    lt div class  row  gt     lt h3 gt Sapphire RX460 OC 2 4GB lt  h3 gt     lt small gt Available in 2GB and 4GB models lt  small gt   lt  div gt    If you can spot patterns you may be able to write a selector which targets what you want  Given the above example all h1  h6 elements may be targeted by combining the  first-child and  not pseudo-classes from CSS3  available in all modern browsers  like so    row  first-child not header                  In the future advanced pseudo-class selectors like  has    and subsequent-sibling combinators      will provide even more control as Web standards continue to evolve over time

User · Answer

The new  is   CSS pseudo-class can do it in one selector   is h1  h2  h3  h4  h5  h6      color  red

User · Answer

The jQuery selector for all h tags  h1  h2 etc  is    header      For example  if you wanted to make all h tags red in color with jQuery  use    x000D   x000D      header   css  color   red   x000D   x000D   x000D

User · Answer

You could  class all the headings in Your document if You would like to target them with a single selector  as follows    lt h1 class  heading  gt    heading text    lt  h1 gt   lt h2 class  heading  gt    heading text    lt  h2 gt    and in the css   heading      color   Dad      background-color   DadDad      I am not saying this is always best practice  but it can be useful  and for targeting syntax  easier in many ways   so if You give all h1 through h6 the same  heading class in the html  then You can modify them for any html docs that utilize that css sheet   upside  more global control versus  section div article h1  etc      downside  instead of calling all the selectors in on place in the css  You will have much more typing in the html  yet I find that having a class in the html to target all headings can be beneficial  just be careful of precedence in the css  because conflicts could arise from

User · Answer

Stylus s selector interpolation for n in 1  6   h n      font  32px 42px trajan-pro-1 trajan-pro-2

[css] Can I target all <H> tags with a single selector?

Examples related to css

Examples related to css-selectors