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

138
Visualizações
applying css to adjacent element

Hi guys what If I have a html elements like below

<div>
  <div>Name</div>
  <div><input type="text" class="check">
  <div>Age</div>
  <div><input type="number" class="check"></div>
  <div>address1</div>
  <div><input type="text"></div>
</div>

I want to change the previous elements of the elements that have .check css property. something like Name -> *Name with read color.

Is it possible in CSS? or Do I need to mix with JS?

Any Ideas or suggestions would be appreciated.

Thanks.

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

0

Here's a possible solution. Changes applied:

  • input tags no longer inside their own div
  • input tag and div containing label changed position. CSS can only look forward.

.container {
  display: flex;
  flex-direction: column-reverse;
}

input {
  width: 200px;
}

input.check+div {
  color: green;
}
<div>
  <div class="container">
    <input type="text" class="check">
    <div>Name</div>
  </div>
  <div class="container">
    <input type="number" class="check">
    <div>Age</div>
  </div>
  <div class="container">
    <input type="text">
    <div>address1</div>
  </div>
</div>

about 4 years ago · Juan Pablo Isaza Relatório

0

I have to say that Gerard's idea seems pretty good and I would use it if I need it, but maybe you can also try giving classes to those elements you want to apply CSS to, so you can directly select those elements. If that's not what you want, you can also try using ntn-child, like so:

<div class="my-class">
  <div>Name</div>
  <div><input type="text" class="check">
  <div>Age</div>
  <div><input type="number" class="check"></div>
  <div>address1</div>
  <div><input type="text"></div>
</div>

CSS

.my-class:nth-child(n) {
  color: red;
}

Take in count that n is the child number that you want to apply the code to, so depending on how many elements are inside your parent element, you can set n to one number or another.

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