CODEWITHSUNDEEP
cssvue.jscss-selectorsstylusvuetify.js
Artur Grigio
Artur Grigio

Reputation: 5553

How to change style based on sibling child attribute

I'm working with Vuetify and Stylus on this snipped of HTML

<div class="input-group input-group--dirty input-group--text-field">
    <label>Language</label>
    <div class="input-group__input">
        <input readonly="readonly" type="text"/>
    </div>
    <div class="input-group__details"></div>
</div>

Is there a CSS/Stylus way to edit input-group__details based on what the status of input[readonly] is?

Something like:

if (.input-group > input has readonly)
    .input-group__details
        height: 0px

else
    .input-group__details
        height: 5px

Basically, how do I change a class based on the sibling's child attribute?

Upvotes: 1

Views: 5389

Answers (3)

Bhuwan
Bhuwan

Reputation: 16855

Well not possible with the provided markup, but if you allowed to change some markup you can get this...try to make the .input-group__details next sibling of input..

Also you don't need to assign a value to readonly...just use readonly

input[readonly]+.input-group__details {
  color: red;
}
<div class="input-group input-group--dirty input-group--text-field">
  <label>Language</label>
  <input class="input-group__input" type="text" readonly />
  <div class="input-group__details">Welcome</div>
</div>
<br>
<div class="input-group input-group--dirty input-group--text-field">
  <label>Language</label>
  <input class="input-group__input" type="text" />
  <div class="input-group__details">Welcome</div>
</div>

Upvotes: 1

connexo
connexo

Reputation: 56744

Unfortunately as of now, this cannot be achieved in CSS, and as all CSS preprocessors need to generate CSS, it also cannot be done with any pre- or post-processing whatsoever.

You will either have to change your HTML structure (make sure the targeted element comes after the readonly input, and they share the parent element), or resort to Javascript.

If you have enough time, you can also wait for selectors level 4 to arrive.

which would solve your problem with this

.input-group__input:has(input[readonly]) + .input-group__details { ... }

Upvotes: 2

Alauddin Ahmed
Alauddin Ahmed

Reputation: 1185

You can bind class.

<div class="input-group input-group--dirty input-group--text-field" :class="'className': trueFalse">
    <label>Language</label>
    <div class="input-group__input">
        <input readonly="readonly" type="text"/>
    </div>
    <div class="input-group__details"></div>
</div>

Now in your vue script:

data: {
    trueFalse: false,
},
methods: {
    someClassName() {
        //condition of your input field
        //if condition true make 'trueFalse' to true else to false
        this.trueFalse = true
    }
}

at last in your css:

.className {
    //add your style with !important
}

Upvotes: 0

Related Questions