Setting font-size for all text except <h1> <h2> etc

Question

I'm applying CSS to a box of my page which may contain <div> <table> <p> and other elements, and just plain text.

I want all the text to be the same font size, with exception for text within tags such as <h1> <h2> <h3>

With objectid "mybox" my simple CSS font modifier was

.mybox * {
font-size: 13px;
}

The problem is that this also sets the font for any <h2> elements and so on. I could add a class to my <h2> elements and another selector to override the font size again, but that feels very backwards.

What is a good way to take care of this?

I found the not() selector which works for classes, but I couldn't find one for html elements like <h2> to exclude them from my "global" font modifier.

Answer 1

Use the :not selector with those "unwanted" elements:

.mybox *:not(h1):not(h2):not(h3) {
  font-size: 13px;
}

<div class="mybox">
  <h1>foo</h1>
  <h2>bar</h2>
  <h3>Hans</h3>
  <label>Gruber</label>
  <p>Goku</p>
  <div>Yoda</div>
</div>

JSFiddle

Answer 2

you can set your font style on the body and add :not(h1):not(h2) for not include style on them.