Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

117
Visualizações
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.

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

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>.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda