Can I select a previous sibling in CSS?

Question

I want to select #btnsrchicon parent's child #txtSearch. I tried in the below format, but not works

HTML

<div id="topSearch">

<input id="txtSearch" name="search" type="text" value="" id="txtSearch" onClick="ClearTextBox()" onkeypress="searchenter(event);"/>
<button id="btnsrchicon" class="submit" onClick="search_another();"></button>

</div>

and CSS

<style>
 #txtSearch{display:none;}
#btnsrchicon:hover < #topSearch+#txtSearch
{
 display: block;
 border:2px solid red;
}
</style>

Do you mean previous sibling selector? Your button element doesn't have any children element. — TylerH, Jul 07 '17 at 13:17

Rafael Gadotti Bachovas · Accepted Answer · 2017-07-07T13:16:52.780

3

CSS doesn't offer this solution.

What you can do is a javascript solution when user hover elem:

$('#btnsrchicon').prev('#txtSearch').addClass('yourClass')

Something like that:

$('#btnsrchicon').hover(function(){
  $(this).prev('#txtSearch').addClass('show');
}, function(){
  $(this).prev('#txtSearch').removeClass('show');
});

#txtSearch{
  display:none;
}

#txtSearch.show {
 display: block;
 border:2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="topSearch">
  <input id="txtSearch" name="search" type="text" value="" id="txtSearch" onClick="ClearTextBox()" onkeypress="searchenter(event);"/>
  <button id="btnsrchicon" class="submit" onClick="search_another();">Button</button>
</div>

Edit: Another solution

#txtSearch{
  display:none;
}

#btnsrchicon:hover + #txtSearch
{
 display: block;
 border:2px solid red;
}

<div id="topSearch">

<button id="btnsrchicon" class="submit" onClick="search_another();">Button</button>
<input id="txtSearch" name="search" type="text" value="" id="txtSearch" onClick="ClearTextBox()" onkeypress="searchenter(event);"/>

</div>

... and you adjust the position with CSS.

edited Jul 07 '17 at 13:16

answered Jul 07 '17 at 13:11

Rafael Gadotti Bachovas

413
4
13

Oh sad; I am trying in CSS – ManiMuthuPandi Jul 07 '17 at 13:16
@ManiMuthuPandi You can position your button before and use a selector. I will edit my answer. – Rafael Gadotti Bachovas Jul 07 '17 at 13:18
@ManiMuthuPandi edited – Rafael Gadotti Bachovas Jul 07 '17 at 13:21
Good thinking; But the text box should display first, before button – ManiMuthuPandi Jul 07 '17 at 13:25
@ManiMuthuPandi Use css to change order – Rafael Gadotti Bachovas Jul 07 '17 at 13:49
Use position absolute per example – Rafael Gadotti Bachovas Jul 07 '17 at 20:21

score 1 · Answer 2 · answered Jul 07 '17 at 13:20

1

There is no parent selector in CSS. But you can select a following sibling. A possible solution might be to change the order of the button and the input and use the + selector, like that:

#btnsrchicon:hover + #txtSearch {
  display: block;
}

#txtSearch {
  display: none;
}

<button id="btnsrchicon" class="submit" onClick="search_another();">Bouton</button>
<input id="txtSearch" name="search" type="text" value="" id="txtSearch" onClick="ClearTextBox()" onkeypress="searchenter(event);"/>

Then, if the order is really important, you can use some css to visually revert the order

answered Jul 07 '17 at 13:20

Richard Casetta

346
1
7

Good thinking; But the text box should display first, before button – ManiMuthuPandi Jul 07 '17 at 13:26
You can use css to visually change the order (flexbox with row-reverse or column-reverse, absolute positioning, ...) – Richard Casetta Jul 07 '17 at 13:31

Can I select a previous sibling in CSS?

2 Answers2