Confusing CSS - can anyone explain

Question

I understand the dot in css is class but what is h2 dot h1 supposed to be selecting in the following I have found in a page?

h1 {
  font-size: 30px;
  line-height: 32px;
}
h2.h1 {
  font-size: 36px;
  line-height: 40px;
}
.title.title_size_medium h1 {
  font-size: 38px;
  line-height: 38px;
}

The h1 tag itself is never used in the page.

Many Thanks

It means select `h2` tag with the `.h1` class. If the `.h1` class is never used, it won't be selected. — Marc Hjorth, May 26 '19 at 15:41

score 1 · Accepted Answer · answered May 26 '19 at 15:47

h2.h1 is selecting an h2 element with the class h1:

h1 {
  font-size: 30px;
  line-height: 32px;
  color: red;
}

h2.h1 {
  font-size: 36px;
  line-height: 40px;
  color: blue;
}

.title.title_size_medium h1 {
  font-size: 38px;
  line-height: 38px;
  color: grey;
}

<h1>Just an h1 element</h1>
<h2 class="h1">h2 element with the class "h1"</h2>

<div class="title title_size_medium">
  <h1>An h1 element inside a div with the class "title" and "title_size_medium"</h1>
</div>

score 0 · Answer 2 · answered May 26 '19 at 15:48

0

h2.h1 selects the <h2> tags in your html, and the .h1 css class styles the h2 tag with the styles from the h2 css class.

answered May 26 '19 at 15:48

Confusing CSS - can anyone explain

2 Answers2