What is the correct syntax for CSS (multiple ID) + (class)

Question

My question is the CSS syntax. I want to add a CLASS(.fade) to multiple ID(titletext1 and titletext2 or more...). The way I write it does not work. What is the correct syntax if I do not want to group them together, not writing them in separate line ?

document.getElementById('titletext1').classList.add('fade');
document.getElementById('titletext2').classList.add('fade');

#titletext1.fade,
#titletext2.fade {
  opacity: 1;
  top: 5px;
}

<h1 class="titletext" id=titletext1>This is a Title!!</h1>
<h1 class="titletext" id=titletext2>A second Title!!</h1>

Thanks

You don't add a class with CSS, do you it with JavaScript. Please explain. — Jack Bashford, Aug 15 '19 at 02:34
`Array.from(document.querySelectorAll('.titletext')||[]).forEach(el=>el.classList.add('fade'));` to apply the `fade` class to the elements using javascript — r3wt, Aug 15 '19 at 02:39
`top: 5px` doesn't do anything without a `position:` style. And `opacity: 1` is the default. — Barmar, Aug 15 '19 at 02:44

Obsidian Age · Accepted Answer · 2019-08-15T02:39:28.720

Simply join the two classes together with a . separator as #{id}.{class}.{class}:

#titletext1.titletext.fade,
#titletext2.titletext.fade {
  color: red;
}

<h1 class="titletext fade" id=titletext1>This is a Title!!</h1>
<h1 class="titletext fade" id=titletext2>A second Title!!</h1>

<h1 class="titletext" id=titletext1>Without fade</h1>
<h1 class="titletext" id=titletext2>Without fade</h1>

<h1 class="fade" id=titletext1>Without titletext</h1>
<h1 class="fade" id=titletext2>Without titletext</h1>

Though note that without the ID, you can combine the two selectors and still target both elements:

.titletext.fade {
  color: red;
}

<h1 class="titletext fade" id=titletext1>This is a Title!!</h1>
<h1 class="titletext fade" id=titletext2>A second Title!!</h1>

<h1 class="titletext" id=titletext1>Without fade</h1>
<h1 class="titletext" id=titletext2>Without fade</h1>

<h1 class="fade" id=titletext1>Without titletext</h1>
<h1 class="fade" id=titletext2>Without titletext</h1>

It should be `.titletext.fade` and you don't need it twice. – Barmar Aug 15 '19 at 02:39 — Barmar, Aug 15 '19 at 02:39
@Barmar - Correct; I'm half-asleep :P Fixed this now. – Obsidian Age Aug 15 '19 at 02:40 — Obsidian Age, Aug 15 '19 at 02:40
THANKS. FIXED!. simply I have some typo. – catcattt Aug 15 '19 at 02:43 — catcattt, Aug 15 '19 at 02:43

What is the correct syntax for CSS (multiple ID) + (class)

1 Answers1