scss - setting parent doesn't seem to work

Question

I have the following code:

 <div class="input-group want-outline">
        <input class="form-control no-outline @(IsValid ? "" : "is-invalid")"
               type="text"......

and this is my scss:

.no-outline:focus {
    box-shadow: none;

    &.want-outline {
        border-radius: 2.5rem;
        border-color: #80bdff;
        border-width: 0.2rem;
    }
}

when the input receives focus, it correctly sets box-shadow to none, but doesn't apply the border details to the parent. ive also tried:

 & { border-radius.....

and

 > & { border-radius.....

to reference the parent, these dont work either.

@Huangism so if I remove all references to the class 'want-outline' Remove it from div element and use `& {....` it compiles to `.no-outline:focus { box-shadow: none; } .no-outline:focus { border-radius: 2.5rem; border-color: #80bdff; border-width: 0.2rem; }` and still doesn't give me my desired result — bilpor, Sep 16 '21 at 14:16
oh wait, sorry what exactly are you trying to do? Are you trying to target the parent based on the child behaviour? — Huangism, Sep 16 '21 at 14:24
Does this answer your question? [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — disinfor, Sep 16 '21 at 14:25
@Huangism , I've tried that and it gives the selector as per your suggestion, but it still doesn't work — bilpor, Sep 16 '21 at 14:25
@bilpor sorry I misread the html, it looks like you are trying to select the parent based on a child condition which is currently impossible to do with css — Huangism, Sep 16 '21 at 14:26
@bilpor SCSS converts to CSS. You cannot change parent styles based on child selection. — disinfor, Sep 16 '21 at 14:37
@bilpor you are misreading how scss works, it's just a preprocesser of css. The output is css so if css does not support parent selector, it is not possible for scss to support it. https://sass-lang.com/documentation/style-rules/parent-selector look at the generated css on the right side, none of those selects a parent based on a child. They should rename this instead of saying parent selector, it's confusing — Huangism, Sep 16 '21 at 14:41

score 1 · Accepted Answer · answered Sep 16 '21 at 14:29

You can set the border on the focus-within style property which will apply styles to the parent element when the focus is within it (ie - when the input within it has focus.. The following uses straight css but can easily be converted to scss.

Note that IE does not support this style property at all (https://caniuse.com/?search=focus-within) but really who cares about ie? :)

Also - your border problem might be because you are not setting the border type (eg " solid / dashed / dotted) - i tend to set all the border styles in the shorthand version most of the time.

.no-outline:focus {
    box-shadow: none;
}

  .want-outline {
      padding: 16px;
      border-radius: 2.5rem;
      display: inline-block;
      border: solid 0.2rem transparent;
  }
  
  .want-outline:focus-within {
     border-color: #80bdff;
  }

<div class="input-group want-outline">
   <input class="form-control no-outline" type="text" placeholde="enter txt"/>
<div>

scss - setting parent doesn't seem to work

1 Answers1