CODEWITHSUNDEEP
htmlcsssass
konichiwa
konichiwa

Reputation: 551

Drawing border only if parent element doesn't have specific class in Sass

I would like to change the behavior of my SASS code. Current SASS code always draws the border on focus event. It should only draw the border when its parent element select2-container doesn't have the select2-container--disabled class. How can I do this?

HTML

<select name="product" id="nbp__name-dropdown" class="form-control select2-hidden-accessible" disabled="" data-select2-id="nbp__name-dropdown" tabindex="-1" aria-hidden="true"></select>
<span class="select2 select2-container select2-container--default select2-container--disabled select2-container--focus" dir="ltr" data-select2-id="2" style="width: 377.5px;">
    <span class="selection">
        <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1" aria-labelledby="select2-nbp__name-dropdown-container">
            <span class="select2-selection__rendered" id="select2-nbp__name-dropdown-container" role="textbox" aria-readonly="true">
                <span class="select2-selection__placeholder">Select a product...</span>
            </span>
            <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
        </span>
    </span>
    <span class="dropdown-wrapper" aria-hidden="true"></span>
</span>

SASS

.select2-selection--single {
  &:focus {
    border: 1px solid $focus-border-color;
  }
}

Upvotes: 0

Views: 130

Answers (2)

Katie
Katie

Reputation: 2683

It should only draw the border when its parent element select2-container doesn't have the select2-container--disabled class. How can I do this?

I couldn't get your code to work in CodePen, so I made up an example, because I was also curious if you could use :not with a parent. If I understand you well, you do not want to draw a border if the parent of the element to be bordered does not have the disabled class. Did it in straight CSS, SASS is not involved :)

So this example works - the middle paragraph will not be bordered:

HTML

<html>
  <head>
  </head>

  <body>
    <div class="chalk">
      <p class="one">This one should be bordered</p>
    </div>
    <div class="chalk disabled">
      <p class="one">This one should not be bordered</p>
    </div>
    <div class="chalk">
      <p class="one">This one should be bordered</p>
    </div>
  </body>

CSS

div:not(.disabled) .one  {
  border: 1px solid black;
}

Upvotes: 1

connexo
connexo

Reputation: 56783

Assuming you're using select2-container--disabled only as an additional class, here you go:

.select2-container {
  &:not(.select2-container--disabled) {
    .select2-selection--single {
      &:focus {
        border: 1px solid black;
      }
    }
  }
}

https://gist.github.com/franktopel/1779117580ea0bf5be02aee0e7e27258

.select2-container:not(.select2-container--disabled) .select2-selection--single:focus {
  border: 1px solid black;
}
<select name="product" id="nbp__name-dropdown" class="form-control select2-hidden-accessible" disabled="" data-select2-id="nbp__name-dropdown" tabindex="-1" aria-hidden="true"></select>
<span class="select2 select2-container select2-container--default select2-container--disabled select2-container--focus" dir="ltr" data-select2-id="2" style="width: 377.5px;" if="foo">
    <span class="selection">
        <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-nbp__name-dropdown-container">
            <span class="select2-selection__rendered" id="select2-nbp__name-dropdown-container" role="textbox" aria-readonly="true">
                <span class="select2-selection__placeholder">Select a product...</span>
            </span>
            <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
        </span>
    </span>
    <span class="dropdown-wrapper" aria-hidden="true"></span>
</span>
<!-- not disabled -->
<select name="product" id="nbp__name-dropdown" class="form-control select2-hidden-accessible" disabled="" data-select2-id="nbp__name-dropdown" tabindex="-1" aria-hidden="true"></select>
<span class="select2 select2-container select2-container--default select2-container--focus" dir="ltr" data-select2-id="2" style="width: 377.5px;" id="bar">
    <span class="selection">
        <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-nbp__name-dropdown-container">
            <span class="select2-selection__rendered" id="select2-nbp__name-dropdown-container" role="textbox" aria-readonly="true">
                <span class="select2-selection__placeholder">Select a product...</span>
            </span>
            <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
        </span>
    </span>
    <span class="dropdown-wrapper" aria-hidden="true"></span>
</span>

Upvotes: 1

Related Questions