CODEWITHSUNDEEP
javascripthtmlcss
Paige
Paige

Reputation: 169

Is it possible to have two h2 with CSS?

I'm just practicing some html/css/js and thought about creating a small program that acts like a light switch that turns an image on and off. Everything is fine except for my 'ON' button and 'OFF' button has the same heading 'H2' so when I go into CSS it has no idea which one is for what which is understandable. I tried renaming the 'H2' to 'H2.left_switch' and 'H2.right_switch respectively <-- saw it somewhere, but it didn't work/ it wasn't displaying the correct heading.

HTML

h1 {
  position: absolute;
  left: 65px;
  top: 150px;
}
h2 {
  position: absolute;
  left: 40px;
  top: 150px;
}
h2 {
  position: absolute;
  left: 100px;
  top: 150px;
}
.leftButton {
  position: absolute;
  top: 300px;
  left: 60px;
  width: 40px;
  height: 30px;
  background-color: gray; 
}
.rightButton {
  position: absolute;
  top: 300px;
  left: 130px;
  width: 40px;
  height: 30px;
  background-color: gray; 
}
.backBoard {
  position: absolute;
  top: 210px;
  left: 40px;
  width: 150px;
  height: 150px;
  background-color: rgb(218, 216, 216); 
}
<!DOCTYPE html>
<html>
     <link rel = "stylesheet" type = "text/css" href = "gayle.css">
<head>
<h1>FESTA</h1>
<h2> ON </h2>
<h2> OFF </h2>
</head>
<body>
<div class="center">
  <div class="backBoard"></div>
  <!--on-->
  <div class="leftButton"></div>
  <!--off-->
  <div class="rightButton"></div>
  <img id = "btsArmyBomb" src = "btsArmyBomb.png"/>
</body>
</html>

Thank you!

Upvotes: 1

Views: 2112

Answers (2)

Rupinderpal Thind
Rupinderpal Thind

Reputation: 537

<h2 class="on"> ON </h2>
<h2 class="off> OFF </h2>

.on{
  position: absolute;
  left: 40px;
  top: 150px;
}
.off{
  position: absolute;
  left: 100px;
  top: 150px;
}

Upvotes: 0

AndrewL64
AndrewL64

Reputation: 16301

H2.left_switch refers to an h2 element with a class name of left_switch. The same goes with the h2.right_switch element.

Just add a class name to your h2 elements as follows:

<h1>FESTA</h1>
<h2 class="left_switch"> ON </h2>
<h2 class="right_switch"> OFF </h2>

And then target the h2 elements in your CSS like this:

h2 {
    exampleStyle: exampleProperty; /* This would apply to both h2 */
}
h2.left_switch { /* This would apply to the h2 with ON */
  position: absolute;
  left: 40px;
  top: 150px;
}
h2.right_switch { /* This would apply to the h2 with OFF */
  position: absolute;
  left: 100px;
  top: 150px;
}

N.B. The first h2 in the css is just an example. You don't have to add that.

Upvotes: 3

Related Questions