0

I am trying to set a custom css selector for an input if there is a button present directly below it or simply contained within the c-form. Any ideas what selector I can use? I was thinking of using not selector but I am not sure.

A simple redirection to an existing question would be appreciated. I haven't seen what I want based on my search criteria.

Current Css

c-form input {
  width: auto;
}

c-form input:not(c-form>button???) {
  width: 100%;
}

Example

<c-form>
  <input> --width:auto;
</c-form>
<c-form>
  <input> --width:100%;
  <button></button>
</c-form>
bldev
  • 137
  • 1
  • 1
  • 12
  • 1
    This is trying to look at a parent as well as a next sibling, both of which are not doable in CSS. Also, as a general rule, always use classes over hierarchical selectors – mhodges Dec 22 '16 at 18:37
  • to look for a sibling you can use `~`, not sure how that can help though... – pol Dec 22 '16 at 18:41
  • To be able to be aware of the `button`, the `input` must come **after** it, so you can write `button + input { width: 100%; }`. To reverse the order in which the button and input are displayed, you can then use the use flexbox `order` property. assigning a value of 2 to the button and 1 to the input. –  Dec 22 '16 at 18:44

0 Answers0