It is possible to apply pseudo-class to an child element.
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
}
<input type="checkbox" id="ossm" name="ossm">
<label for="ossm">CSS is Awesome</label>
What about to apply that pseudo-class to a partent or parents?
For example to the DIV Element? How can I write my CSS Code?
My inputs are already "checked" at the page load so I need just to add style.
<div>
<label for="ossm">
<input type="checkbox" id="ossm" name="ossm" checked>
</label>
</div>
The current CSS Selectors Level 4 working draft proposes the relational pseudo-class :has(), so this should be possible in the future:
div:has(> label > input[type=checkbox]:checked) {
/* ... */
}
However, no browser supports this pseudo-class selector as of the time of this writing.
Currently, it is not possible to "select an ancestor element" with CSS alone. For the time being, you will have to keep using the sibling selector or use some JavaScript to listen for change events on the checkbox and select its ancestor element.
Related
I have a number of [input type checkbox] with corresponding labels, for example:
<div>
<input id="idOne" type="checkbox" checked>
<input id="idTwo" type="checkbox">
</div>
<div>
<label for="idTwo">One</label>
<label for="idTwo">Two</label>
</div>
The label/input are connected with the [for] property. I need to style the lable based on the [checked]-status of the checkbox. Can this be done WITHOUT a combinator as the structure makes using child/sibling combinators a poor choice.
Somthing along the lines of:
label[input:checked = "true"]{
color:pink;
}
Can this be done in a stable fashion with css or will I need to add/remove a classs with JS?
THX in advance :)
I have tried to write a selector that will target the label of a checked input element (type="checkbox").
Yes, you can apply CSS to the label on the input checked status.
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #0964aa;
font-style: normal;
}
<input type="checkbox" id="idname" name="cb_name">
<label for="idname">CSS is Awesome</label>
Ciao, I have this element here:
<div class="uk-form-row">
<div class="md-input-wrapper md-input-filled md-input-focus">
<label>Label</label>
<input type="text" class="md-input">
<span class="md-input-bar"></span>
</div>
</div>
This is from a material design theme (Altair Admin v2) so the element once the page is loaded does this:
As you can see the label is moving around (but maybe is not a big deal).
With other elements, if they are empty (invalid) I can underline them or change their color using css:
input:invalid::-webkit-input-placeholder{
color: #e53935 !important;
}
But being this a label BEFORE the input I don't know how I can select it with CSS. How do I turn the LABEL into a different color if the input is invalid?
There is a simpler way to get this done. The :valid and :invalid pseudo-classes will automatically bubble up to a parent <fieldset>. Here is the reference.
You can take advantage of this fact to style your label like so:
<fieldset>
<label>Label</label>
<input type="text" />
</fieldset>
Then in your CSS
fieldset:invalid > label:first-of-type {
color: #e53935 !important;
}
So if your input is :invalid it will invalidate your fieldset, which you can then reference to style your label.
Look at CSS code (simplified to illustrate my point):
.md-input-wrapper {
position: relative;
}
.md-input-wrapper > label {
position: absolute;
top: 16px;
left: 4px;
right: 0;
}
Label is positioned absolutely relative to wrapper, so you can put label element after input element in HTML:
<div class="md-input-wrapper">
<input type="text" class="md-input">
<span class="md-input-bar"></span>
<label>Label</label>
</div>
After that, you can use General sibling combinator to select label of invalid input:
input:invalid ~ label {
color: red;
}
I want to find out if it is possible to target both neighboring elements using the middle one?
for example:
<div>
<span class="icon">icon</span>
<input id="input" class="input error" type="text" />
<label for="input"></label>
<div>
When the input has the error class I want to target the label and the span to have the color red.
I managed to make the label red with the following:
input.error ~ label {
color: red;
}
However I've had no luck with the span. Can somebody maybe tell me if this is possible? and if so please help.
You can use flexbox with the order property to re-order the elements visually, while having the input as the first element in the DOM so you can use the general sibling selector.
div {
display: flex;
}
.icon {
order: -1;
}
input.error ~ * {
color: red;
}
<div>
<input id="input" class="input error" type="text">
<span class="icon">icon</span>
<label for="input">label</label>
<div>
I used jquery .siblings() to target the span and add a class to it.
I want to find out if it is possible to target both neighboring
elements using the middle one?
You can use the axe selector % to target both neighbouring elements.
Since there is no shared class or element type between .icon and label, you'll need to declare:
input.error % .icon,
input.error % label {
color: red;
}
Alternatively, (in this case) you might combine the CSS immediate subsequent sibling selector + and the axe immediate previous sibling selector ?:
input.error ? .icon,
input.error + label {
color: red;
}
I'm trying to style the first legend element within nested fieldsets, but none of the CSS selectors I used achieve what I'm after.
http://codepen.io/anon/pen/epodxd
I basically want to style the first legend element without using any additional CSS class if possible.
<fieldset class="nested-parent">
<legend>Parent</legend>
<input type="text" size="10" />
<fieldset>
<legend>Child</legend>
<input type="text" size="20" />
</fieldset>
</fieldset>
.nested-parent legend:first-child {
color: red;
}
Based on the HTML you provided, you could use the child selector, > in order to select the first legend element that is a direct child of the .nested-parent element:
.nested-parent > legend:first-child {
color: #f00;
}
I would suggest using the :first-of-type pseudo class instead though. It will be more accurate when dealing with the element's types.
Example Here
.nested-parent > legend:first-of-type {
color: #f00;
}
I have a button and I would like to change the css when someone focuses on the input field.
html body form div#composite-field input[type=email]:focus ~ html body form div#composite-field input[type=submit] {
color: #ffffff;
background-color: #2e4e67;
}
HTML:
<form method='post' class="animate" autocomplete="off">
<div id="composite-field">
<input type='email' class='animate' value='' placeholder='Е-mail Адреса'>
<input type='submit' class='animate' value='>'>
</div>
</form>
As far as I've looked up online, I have the selector setup properly. But for some reason it isn't working.
I'd appreciate another set of eyes to help identify the problem?
Thanks
~ is a general sibling combinator. Thus, the elements have to be siblings in order for it to be selected.
Based on the HTML you provided, use the following:
Example Here
form div#composite-field input[type=email]:focus ~ input[type=submit] {
color: #ffffff;
background-color: #2e4e67;
}
You already narrowed the selector down to the #composite-field element. After the combinator, ~, you would just specify the sibling element you are trying to select. You were trying to select a sibling html element, and then select the input[type=submit] element within it. Since it isn't a sibling of input[type=email], nothing was selected.