align h1 to h6 differently in divs

Question

I have the following CSS

.align-headers-desktop-left h1, h2, h3, h4, h5, h6 {
    text-align: left;
    color: red;
}

.align-headers-desktop-right h1, h2, h3, h4, h5, h6 {
    text-align: right;
    color: red;
}

.align-headers-desktop-centre h1, h2, h3, h4, h5, h6 {
    text-align: center;
    color: red;
}

.align-headers-desktop-justify h1, h2, h3, h4, h5, h6 {
    text-align: justify;
    color: red;
}

In the 1st div the header will align correctly, problem is in the next div the header aligns to whatever the alignment is for the 1st div.

I have tried using !important, but that does not work, I have tried adding div to the front of the class and that did not work

The text will be as follows

<div class="align-headers-desktop-right">
    <h1>H1</h1>
</div>

Any help would be appreciated

Mihai T Temani Afif so this question is a duplicate, please tell me where in the question I asked what comma's and spaces mean!!!!! If you look closely, I answered my own question about 10 minutes after I posted it when I realised what my mistake was. That's one of the problems with SO lately, people are quick to mark people down or mark the questions as duplicate — Paul Thompson, Jan 17 '19 at 14:00

score 0 · Answer 1 · answered Jan 17 '19 at 11:19

Been a long day, CSS should have been as follows

div.align-headers-desktop-left h1, div.align-headers-desktop-left h2, div.align-headers-desktop-left h3, div.align-headers-desktop-left h4, div.align-headers-desktop-left h5, div.align-headers-desktop-left h6 {
        text-align: left;
        color: red;
    }
    div.align-headers-desktop-right h1, div.align-headers-desktop-right h2, div.align-headers-desktop-right h3, div.align-headers-desktop-right h4, div.align-headers-desktop-right h5, div.align-headers-desktop-right h6 {
        text-align: right;
        color: red;
    }
    div.align-headers-desktop-centre h1, div.align-headers-desktop-centre h2, div.align-headers-desktop-centre h3, div.align-headers-desktop-centre h4, div.align-headers-desktop-centre h5, div.align-headers-desktop-centre h6 {
        text-align: center;
        color: red;
    }
    div.align-headers-desktop-justify h1, div.align-headers-desktop-justify h2, div.align-headers-desktop-justify h3, div.align-headers-desktop-justify h4, div.align-headers-desktop-justify h5, div.align-headers-desktop-justify h6 {
        text-align: justify;
        color: red;
    }

score 0 · Answer 2 · answered Jan 17 '19 at 11:24

Here is an working example:

.align-headers-desktop-left h1,
.align-headers-desktop-left h2,
.align-headers-desktop-left h3,
.align-headers-desktop-left h4,
.align-headers-desktop-left h5,
.align-headers-desktop-left h6 {
  text-align: left;
  color: red;
}
.align-headers-desktop-right h1,
.align-headers-desktop-right h2,
.align-headers-desktop-right h3,
.align-headers-desktop-right h4,
.align-headers-desktop-right h5,
.align-headers-desktop-right h6 {
  text-align: right;
  color: red;
}
.align-headers-desktop-centre h1,
.align-headers-desktop-centre h2,
.align-headers-desktop-centre h3,
.align-headers-desktop-centre h4,
.align-headers-desktop-centre h5,
.align-headers-desktop-centre h6 {
  text-align: center;
  color: red;
}
.align-headers-desktop-justify h1,
.align-headers-desktop-justify h2,
.align-headers-desktop-justify h3,
.align-headers-desktop-justify h4,
.align-headers-desktop-justify h5,
.align-headers-desktop-justify h6 {
  text-align: justify;
  color: red;
}

<div class="align-headers-desktop-left">
    <h1>H1</h1>
    <h2>H2</h2>
    <h3>H3</h3>
    <h4>H4</h4>
    <h5>H5</h5>
    <h6>H6</h6>
</div>
<div class="align-headers-desktop-centre">
    <h1>H1</h1>
    <h2>H2</h2>
    <h3>H3</h3>
    <h4>H4</h4>
    <h5>H5</h5>
    <h6>H6</h6>
</div>
<div class="align-headers-desktop-right">
    <h1>H1</h1>
    <h2>H2</h2>
    <h3>H3</h3>
    <h4>H4</h4>
    <h5>H5</h5>
    <h6>H6</h6>
</div>
<div class="align-headers-desktop-justify">
    <h1>H1</h1>
    <h2>H2</h2>
    <h3>H3</h3>
    <h4>H4</h4>
    <h5>H5</h5>
    <h6>H6</h6>
</div>

align h1 to h6 differently in divs

2 Answers2