I can write this selector condition:
h1:not(footer)
, h2:not(footer)
, h3:not(footer)
, h4:not(footer)
, h5:not(footer)
, h6:not(footer) {
font-family: "Luckiest Guy";
}
but, exists anything easy to use like:
(h1, h2, h3, h4, h5, h6):not(footer) {
font-family: "Luckiest Guy";
}
This is where css preprocessor comes in, you can add variables and functions for efficient development. It also makes your code more organized and clean.
Try using SASS, you can do that with:
h1, h2, h3, h4, h5, h6 {
&:not(footer) {
font-family: "Luckiest Guy";
}
}
It will compile this and generate a new css file that is equivalent to the code above.
Link to sass: https://sass-lang.com/
Is it possible to change all original Bootstrap font sizes of h1,h2,h3,h4 etc. elements at the same time by adding something to custom css file without writing new sizes for each separate element.
My idea is to make font sizes smaller:
h1,
h2,
h3,
h4,
h5,
h6
{
80% of Bootstrap font sizes;
}
you can change the styling in bootstrap.min.css but its not a good practice rather than you should make the changes into your css only ,the best ways give your wrapper name followed by H1
eg: wrappnername h1,h2,h2,h4{font-size:12px;}
You can use 'em' to set a relative
font-size
h1, h2, h3, h4{ font-size: 0.8em; }
If that does not make a differance try adding the !important
So here's the problem I have. I wanted to be efficient and set all of my header tags to be the same font-family. So I used the code below. However it only appears to work when the multiple selector code is AFTER the single h2 code.
If i place the multi-selector code BEFORE the h2 code then it ignores it completely. Any thoughts as to what I am missing? Here's a link to the test page:
http://www.jasonkoprowski.com/test/JK_Test.html
I want the header to display using 'Crimson Text' font but seems to be defaulting to 'Times New Roman' (not even sure where it's getting this from actually. It works find when i put the h1, h2, h3, h4, h5 code after but not before. I guess I could just put it after the h2 tag code and be done with it but I want to make sure that I understand the root cause of the issue:
h1, h2, h3, h4, h5 {
font-family:"Crimson Text", "Lucida Sans Unicode","Times New Roman", serif;
}
h2 {
color:#232323;
font-style:normal;
font-weight:500;
letter-spacing:-1px;
line-height:1.1em;
margin:30px 0;
text-align:center;
font-size:42px;
}
To add even more to my confusion, when I added the code to Code Pen (http://codepen.io/anon/pen/EDpJg) it looks to be rendering correctly...so something wrong on my site?
Any help you can offer would be greatly appreciated.
Thank you,
Koprowski
The problem isn't with your selectors or the ordering of your rules (although in general it does matter sometimes), it's with the <style> tags at the beginning and end of your stylesheet:
<style type="text/css">
and
</style>
<!--CSS END-->
These belong in an HTML page, but not in a CSS sheet. Furthermore, the start tag is interfering with your h1, h2, h3, h4, h5 rule. You should remove them.
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)
No, a comma-separated list is what you want in this case.
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 > %headings {
color: red;
}
It's not basic css, but if you're using LESS (http://lesscss.org), you can do this using recursion:
.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) 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.
The new :is() CSS pseudo-class can do it in one selector.
For example, here's how you could target all headings inside a container element:
.container :is(h1, h2, h3, h4, h5, h6)
{
color: red;
}
Most browsers now support :is(), but keep in mind that most browsers made before 2020 didn't support it without a prefix, so be careful about using this if you need to support older browsers.
In some cases, you may instead want to use the :where() pseudo-class, which is very similar to :is() but has different specificity rules.
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:
Here is my attempt to solve this problem with (modern) CSS only.
Context : Inside of Joplin (very nice note taking app, link), there is an userfile.css in which you can write your custom CSS for display and export of markdown notes.
I wanted to target all headings directly after (adjacent sibling) certain tags, namely p, ul, ol and nav to add a margin in between. Thus :
p + h1,
p + h2,
p + h3,
p + h4,
p + h5,
p + h6,
ul + h1,
ul + h2,
ul + h3,
ul + h4,
ul + h5,
ul + h6,
ol + h1,
ol + h2,
ol + h3,
ol + h4,
ol + h5,
ol + h6,
nav + h1,
nav + h2,
nav + h3,
nav + h4,
nav + h5,
nav + h6 {
margin-top: 2em;
}
WOW. Very long. Such selectors.
I then came here, learnt, and tried :
p + :is(h1, h2, h3, h4, h5, h6),
ul + :is(h1, h2, h3, h4, h5, h6),
ol + :is(h1, h2, h3, h4, h5, h6),
nav + :is(h1, h2, h3, h4, h5, h6) {
margin-top: 2em;
}
Hmm. Much shorter. Nice.
And then, it struck me :
:is(p, ul, ol, nav) + :is(h1, h2, h3, h4, h5, h6) {
margin-top: 2em;
}
Yay, this also works! How amazoomble!
This might also work with :where() or other CSS combinators like ~ or even (space) to create "matrix" of CSS selectors instead of very long lists.
Credits : all the answers on this page referencing the :is() selector.
Stylus's selector interpolation
for n in 1..6
h{n}
font: 32px/42px trajan-pro-1,trajan-pro-2;
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:
$(':header').css("color","red")
July 2022 update
The future came and the :is selector is what you're looking for as described in this answer given in 2020 by #silverwind (now the selected answer).
Original answer
To tackle this with vanilla CSS look for patterns in the ancestors of the h1..h6 elements:
<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>
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.
Plain CSS
With plain css you have two ways. This targets all the heading elements wherever they are inside the page (as asked).
:is(h1, h2, h3, h4, h5, h6) {}
This one does the same but keeps the specificity to 0.
:where(h1, h2, h3, h4, h5, h6) {}
With PostCSS
You can also use PostCSS and the custom selectors plugin
#custom-selector :--headings h1, h2, h3, h4, h5, h6;
:--headings {
margin-top: 0;
}
Output:
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
}
You could .class all the headings in Your document if You would like to target them with a single selector, as follows,
<h1 class="heading">...heading text...</h1>
<h2 class="heading">...heading text...</h2>
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
Using scss you can loop through 6 and append to an empty variable $headings using a comma separator
$headings: ();
#for $index from 1 through 6 {
$headings: list.append($headings, h#{$index}, $separator: comma);
}
#{$headings} {
--default: var(--dark);
color: var(--default);
}
Thanks #steve
Is it possible to tweak the default browser font properties of h1 through h6 using the font shorthand property without changing the font-size, something like this:
h1, h2, h3, h4, h5, h6 { font:400 normal/1.2 rockwell,sans-serif; }
I guess the alternative is not using shorthand (like below) but if it's possible it would be nice to know.
h1, h2, h3, h4, h5, h6 {
font-weight:400;
line-height:1.2;
font-family:rockwell,sans-serif;
}
No, according to this (http://www.w3schools.com/cssref/pr_font_font.asp):
The font shorthand property sets all the font properties in one
declaration.
The properties that can be set, are (in order): "font-style
font-variant font-weight font-size/line-height font-family"
The font-size and font-family values are required. If one of the other
values are missing, the default values will be inserted, if any.