CSS - How to select the last brother?

Question

CSS - How to select the last brother?

Navigation

#1 by (1 votes)
#2 by (0 votes)

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>

Iwouldliketoselectthelastlabelcorrespondingtotheinputthatreceivedfocustostylizeitandemphasizewhichfieldisfocused.

Forexample,givingfocustotheinputwithid="name" would like to select the label with attribute for="name".

I tried to use the ~ selector, but this would work only if the label came after the input, which would leave the HTML somewhat semantic.

Thank you in advance! (y)

css seletores input label

asked by anonymous 18.09.2016 / 15:08

2 answers

0

Hello,

In CSS we can not apply recursion, in case you need to apply 2 functions on the selected element, the first is to identify that it is selected and the second is to navigate the DOM tree and apply style. There are still 2 more functions when you want to reverse the style when you focus on the element.

So, we'll 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>

18.09.2016 / 19:37

Color a region of the chart How to access an item in an array of objects? [closed]

score 1 · Accepted Answer

You can get the result you are looking for using only CSS yes, but as stated in the comments, your HTML structure would need to change.

Correcting what you commented about already attempting using the ~ selector did not work because the correct one would be to use the + selector. See the difference:

ul ~ p : Selects all elements p that is preceded by an element ul

ul + p : Selects all elements p that are immediately after a ul element

However, when it comes to parsing the state ( focus , active , etc ...) of the element, we can not select the element before it, only the element itself and the following elements. So its structure would only be solved through javascript (or other method 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 example below working: link