CSS - How to select the last sibling?

Asked

Viewed 783 times

2

I have the following HTML structure: 

<form action="" id="form-contato">
  <label for="nome">Nome</label>
  <input type="text" name="nome" id="nome" placeholder="Nome"/>

  <label for="email">E-mail</label>
  <input type="email" name="email" id="email" placeholder="[email protected]">

  <label for="assunto">Assunto</label>
  <input type="text" name="assunto" id="assunto" placeholder="Assunto">

  <label for="mensagem">Mensagem</label>
  <textarea name="mensagem" id="mensagem" placeholder="Escreva aqui sua mensagem"></textarea>

  <button class="bt">Enviar</button>
</form>

inserir a descrição da imagem aqui

I would like to select the last label corresponding to the input that received focus to stylize it and emphasize which field is focused.

For example, when focusing on input with id="name" I would like to select the label with attribute for="name".

I tried to finish the dial ~, but this would only work if the label came after input, which would make HTML semantic.

Thanks in advance! (y)

css form input selectors label

  • you want to do this using only css? or involving JS as well? Because if it is only css you need to change your html structure

  • Initially I would like to do only with CSS, but I realized that is not possible, so I ended up applying a solution with Javascript.

  • Possible is, only it would change its HTML structure

2 answers

1


It is possible to get the result you are looking for using only CSS yes, however, as stated in the comments, its structure HTML would need to change.

Correcting what you said about trying using the selector ~ it did not work because the correct would be to use the selector +. See the difference:

ul ~ p : Selects all the elements p which is preceded by an ul

ul + p : Selects all the elements p immediately after an item ul

However, when it comes to analyzing the state (focus, active, etc...) of the element, we cannot select the element before it, only the element itself and the following elements. So its structure would only be solved through javascript (or any method other than CSS pure).

In your case, to make it work, you would need to use this HTML structure:

<input type="text" />
<label>Nome</label>

And the following CSS:

input:focus + label {
    color: red;
}

See the following working example: https://jsfiddle.net/zsderorm/1/

  • I understood Celsom. The way you put it perfectly, but it would not be a good practice to put the Label after the input. Imagine a screen reader, for example: the user would access the input first and then know what it is about through the label. Anyway, thanks! It’s always good to add more knowledge. (y)

  • @Cleitonpereira Yes, there will depend on your target audience, need of the project and everything else. But good that I could help.

0

Hello,

In CSS we cannot apply recursion, in your case it needs to be applied 2 functions on the selected element, the first is to identify that it is selected and the second is to navigate by the DOM tree and apply style. There are 2 more functions when you want to reverse the style while focusing on the element.

Therefore, we will use javascript and css for solution:

function modificaLabel(el) {
		el.previousSibling.previousSibling.className += " otherclass";
	}

function voltaLabel(el) {
		el.previousSibling.previousSibling.className = el.previousSibling.previousSibling.className.replace(" otherclass","");
	}
.otherclass{
  color: red;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<form action="" id="form-contato" class="newForm">
	  <label for="nome">Nome</label>
	  <input onfocus="modificaLabel(this)" onblur="voltaLabel(this)" type="text" name="nome" id="nome" placeholder="Nome" class="nome">

	  <label for="email">E-mail</label>
	  <input onfocus="modificaLabel(this)" onblur="voltaLabel(this)" type="email" class="email" name="email" id="email" placeholder="[email protected]">

	  <label for="assunto">Assunto</label>
	  <input onfocus="modificaLabel(this)" onblur="voltaLabel(this)" type="text" name="assunto" id="assunto" placeholder="Assunto">

	  <label for="mensagem">Mensagem</label>
	  <textarea onfocus="modificaLabel(this)" onblur="voltaLabel(this)" name="mensagem" id="mensagem" placeholder="Escreva aqui sua mensagem"></textarea>

	  <button class="bt">Enviar</button>
	</form>
</body>
</html>

  • Thanks Erick! I ended up using Javascript anyway. As it is an interaction process, it would be more convenient to leave in the behavior layer, the Javascript, the application of this style in the Label.

Browser other questions tagged css form input selectors label

You are not signed in. Login or sign up in order to post.