2

So, .search-chat-search-btn > form { } targets the form "inside" the element with class .search-chat-search-btn, but can I make it go the other way? As in, target the form that is outside .search-chat-search-btn?

<form>
    <button class="search-chat-search-btn"></button>
</form>

Apparently this is suppose to work, but it doesn't. Target every form that has a button.

form:has(> button) {
    display: inline;
    border: red 1px solid;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/:has

(but then I just realised it's only supported in Safari, development version?)

JAmes
  • 261
  • 1
  • 5
  • 15
  • Unfortunately no, there is - as yet - no parent selector; though - as you mention in your question - there is the [relational selector, `:has()`](https://www.w3.org/TR/selectors-4/#relational), which is not yet implemented, in [Selectors Level 4](https://www.w3.org/TR/selectors-4/) – David Thomas Feb 07 '22 at 23:56

2 Answers2

2

You can't target a parent element in CSS. It's not possible (at least not yet). Also concerning :has, no major browser supports it yet.

ruleboy21
  • 5,510
  • 4
  • 17
  • 34
1

As in, target the form that is outside .search-chat-search-btn?

Based on the question, I assume you want to select style all the form that not inside the .search-chat-search-btn, then you probably looking for css :not pseudo-class

Maybe you are looking for :not : 

:not(.search-chat-search-btn) form{
  color:blue
}
.search-chat-search-btn form{
color:red
}
<div class='search-chat-search-btn'>
<form>Yes</form></div>
<form >Hello</form>
<form >Hello</form>
James
  • 2,732
  • 2
  • 5
  • 28
  • Not quite. I edited an example to my question. – JAmes Feb 07 '22 at 23:49
  • @JAmes, I little confused, you want to select the button that outside the search-chat-search-btn or the form that doesn't has `button:search-chat-search-btn`? – James Feb 07 '22 at 23:50
  • Select all the forms that have a button with the class `search-chat-search-btn` – JAmes Feb 07 '22 at 23:54