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;
}
Related
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;
}
My Code Looks something like this:
input{
...
}
label{
...
}
<div class="textfield 1">
<input tpye="text" id="fullname">
<label for="fullname">Name</label>
</div>
<div class="textfield 2">
<input tpye="text" id="fullname">
<label for="fullname">Name</label>
</div>
<div class="textfield 3">
<input tpye="text" id="fullname">
<label for="fullname">Name</label>
</div>
now i want to apply the css only on one of the textfields and because the code is way to long to ad a ".textfield1" to every css element i want to ask if i can create a "parent class element" like:
.textfield1{
input{
...
}
label{
...
}
}
.textfield2{
input{
...
}
label{
...
}
}
It's like putting the styled elements in a Folder.
Is there a way to do that?
Thanks a lot in advance!
You can use:
.textfield1 input {
...
}
.textfield1 label {
...
}
Check this link for more CSS selectors combinations: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
As Turnip mentions in comments, you cannot have spaces in classnames. So instead of having class names such as textfield 1, you could have them like textfield1 - or something else. For the time being, I am using textfield1 to demonstrate the solution.
Now, you could use the descendant selector .textfield1 input (notice the space between the class name and tag name) or the child selector .textfield2 > input (notice the arrow > between the class name and tag name) to specify that given CSS rule must apply only to the descendants or children of given class.
input{
border: 2px solid blue;
}
label{
color: blue;
}
.textfield1 input {
border: 2px solid red;
}
.textfield2 > input {
border: 2px solid yellow;
}
<div class="textfield1">
<input tpye="text" id="fullname">
<label for="fullname">Name</label>
</div>
<div class="textfield2">
<input tpye="text" id="fullname">
<label for="fullname">Name</label>
</div>
<div class="textfield3">
<input tpye="text" id="fullname">
<label for="fullname">Name</label>
</div>
If you use preprocessor like Sass or Less, you can nasted css like your example. It's not possible in the classical way.
In css:
.textfield2 input{
...
}
.textfield1 input{
...
}
.textfield1 label, //<- if the label style of textfield1 and textefield2 are same
.textfield2 label{
...
}
Be careful, in your HTML you have a space between textfield and the number <div class="textfield 3">. That's mean your div has the CSS class textfield and the CSS class 3.
If you just want one class remove the space and the code above works.
If you keep the space, just modify .textfield2 to .textfield.2 with a dot between textfield and the number (to indicate that the style it's for the class textfield with the class 2)
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.
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.