CSS - How to select the last sibling?

Question

CSS - How to select the last sibling?

Asked 7 years, 9 months ago

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>

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)

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

– celsomtrindade

2016/09/18 at 14:26
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.

– Cleiton Pereira

2016/09/19 at 11:40
Possible is, only it would change its HTML structure

– celsomtrindade

2016/09/19 at 11:43

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)

– Cleiton Pereira

2016/09/19 at 13:29
@Cleitonpereira Yes, there will depend on your target audience, need of the project and everything else. But good that I could help.

– celsomtrindade

2016/09/19 at 13:39

Browser other questions tagged css form input selectors label

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

by Erick Jonatha Peiker • 41 points · Answer 1 · 2016-09-18T17:37:24+00:00

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>