CODEWITHSUNDEEP
htmlcss
Lost Koder
Lost Koder

Reputation: 894

Apply same styles on all headers tag within a div

I want apply some styles on all (h1,h2,...,h6) within a div with for example .header class in order to do that I write following css in my document.

.header h1,h2,h3,h4,h5,h6 {
    position: absolute;
    top: 20px;
    right: 20px;
}

problem occurs when I want to use (h1,h2,...,h6) somewhere else outer of div.header. Same styles applies on them too. What should I do to fix this?

Upvotes: 2

Views: 6331

Answers (2)

redanimalwar
redanimalwar

Reputation: 1523

When CSS Nesting is ready you can get rid of the duplication in your final CSS.

With SCSS you can do the following to get rid of duplication in your code but it will be compiled into what is in the accepted answer.

.header {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    position: absolute;
    top: 20px;
    right: 20px;
  }
}

Upvotes: 0

danmullen
danmullen

Reputation: 2510

You're only restricting h1 to your .header div. Change to:

.header h1,
.header h2,
.header h3,
.header h4,
.header h5,
.header h6 {
    position: absolute;
    top: 20px;
    right: 20px;
}

Upvotes: 8

Related Questions