1

Lets say I have 3 inputs,2 type="text" and 1 type="button"

Is there a way to select all siblings of the button that are type text?

for example on button hover to apply background: yellow; to its text siblings.

li input{
  margin:3px;
}
li [type="button"]{
  background:red;
  color:white;
  border:1px solid grey;
}
li:hover [type="button"]{
  background:white;
  color:red;
}
<ol>
  <li><input type="text"><input type="text"><input type="button" value="BUTTON"> 
  </li>
</ol>
Subrato Pattanaik
  • 5,331
  • 6
  • 21
  • 52

1 Answers1

3

CSS can process only "future" elements from current one, so you can not select "previous siblings".

I also suggest using classes, but it's up to you.

You can select following siblings with ~ and put elements in reverse:

[type="button"]:hover ~ [type="text"] {
  border: 1px solid red;
}

input {
    float: right;
}
<div class="wrapper">
  <input type="text"/>
  <input type="button"/>
  <input type="text"/>
  <input type="text"/>
</div>

Better solution: apply hover on parent:

.wrapper:hover [type="text"] {
  border: 1px solid red;
}
<div class="wrapper">
  <input type="text"/>
  <input type="button"/>
  <input type="text"/>
  <input type="text"/>
</div>
Justinas
  • 41,402
  • 5
  • 66
  • 96
  • 1
    i understood the first part,i just dont quite understand how its a better solution to apply hover on parent,since i want to apply styles only when the button is hovered,not the whole family –  Jan 22 '21 at 12:02
  • If you really don't want to use a wrapper, you can use flexbox and order. Here is an example: https://jsfiddle.net/rc09joe6/ – BunyamiN Jan 22 '21 at 12:10
  • 1
    @BunyamiN But... you still use wrapper. `
      ` is wrapper for `
    1. `!
     – Justinas Jan 22 '21 at 12:12
  • @Justinas Yes I can remove the `
      ` but than the `
    1. ` becomes the wrapper, which you will need to make it work with flex. I agree that using hover on a parent is better solution here.
     – BunyamiN Jan 22 '21 at 12:23