CODEWITHSUNDEEP
javascripthtmlcss
Razzer
Razzer

Reputation: 884

How can i edit a background based on the h3 content inside a div?

.package {
  border: var(--border);
  border-radius: var(--border-radius);
  background: var(--color-bg-900);
  padding: var(--spacing-grid) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.package h3 {
  font-size: 1rem;
  padding: 0 0 var(--spacing-xs) var(--spacing-grid);
}
<div class="package">
  <div class="package__info">
    <h3>Bl4ckšŸŽGift</h3>
    <div class="package__tags">
      <span class="tag tag--left tag--700">10.00 EUR</span>
    </div>
  </div>
  # another content here
</div>

I need to change the background CSS flag, if the <h3> tag has Bl4ckšŸŽGift as specific content inside the <div class="package__info> class. And my question is, how can I change the background for the package class if the <h3> tag has specific content? I know how I can change backgrounds, but because it's my first time I work with CSS, I have no clue how I can find the specific package with the Bl4ckšŸŽGift content inside the <h3> tag. What would be the best way to change the background for this specific package? I don't know how I can do it with javascript either. I'd like a solution for this, to learn from it.

I'm not very sure how I can describe this problem, not even in my mother language. I hope you guys still understand what I mean and what I need. Feel free to edit the post, if you can explain it better.

Upvotes: 1

Views: 113

Answers (1)

Michael Haddad
Michael Haddad

Reputation: 4435

You could use JavaScript to check the content of the h3 element, and then set the background accordingly.

const package = document.querySelector(".package");
const h3 = document.querySelector(".package__info h3");

if (h3.innerText === "Bl4ckšŸŽGift") {
  package.style.background = "red";
}
.package {
  border: var(--border);
  border-radius: var(--border-radius);
  background: var(--color-bg-900);
  padding: var(--spacing-grid) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.package h3 {
  font-size: 1rem;
  padding: 0 0 var(--spacing-xs) var(--spacing-grid);
}
<div class="package">
  <div class="package__info">
    <h3>Bl4ckšŸŽGift</h3>
    <div class="package__tags">
      <span class="tag tag--left tag--700">10.00 EUR</span>
    </div>
  </div>
  ...other content here
</div>.

Upvotes: 2

Related Questions