Is it possible to use adjacent selector with less - css

I wonder if I can use the adjacent selector in LESS. Here's a piece of code :
HTML
<input id="my-input" type="text" class="my-class"/>
<label for="my-input" />
LESS
.my-class {
display: none;
&+label {
color: red;
}
}
I'm getting an error when compiling this LESS code. It says Unrecognized Input at line XX (&+label)
Any ideas ?
EDIT
Actually I get this error when I add one more nested rule like this :
.my-class {
display: none;
&+label {
color: red;
&:hover {
background-color: grey;
color: blue;
}
}
}
I don't if this is a bug or not.

Related

Element Plus: How to style the rendered components

I am trying to style element plus' el-radio-button in a el-radio-group to have different colours. It is not available by the el-radio-button properties, so I'm trying to target the rendered html elements. When I inspect my webpage, something like the following is shown:
<label class="el-radio-button" role="radio" aria-checked="false" aria-disabled="false" tabindex="-1" data-v-bf51d4b2="" style="color: red;">
<input class="el-radio-button__original-radio" type="radio" name="" tabindex="-1" value="Karthus">
<span class="el-radio-button__inner">Karthus</span>
</label>
The styles are applied on label.el-radio-button and span.el-radio-button__inner but I can't seem to target them using the following styles in my sfc:
<style lang="scss" scoped>
.el-radio-button {
color: red;
padding: 20em;
.el-radio-button__inner {
color: blue;
&:hover {
color: red;
}
}
}
</style>
None of these are applying. I can't really tell whether it's because of specificity, or just overrides, etc. !important on the color properties also don't seem to apply. Is there a way to properly target the rendered html elements in the sfc style?
Use more specific css selectors and it should work
<style>
.el-radio-group .el-radio-button {
color: red;
padding: 20em;
}
.el-radio-group .el-radio-button__inner {
color: blue;
}
.el-radio-group .el-radio-button__inner:hover {
color: red;
}
</style>
example

How to combine two SCSS selectors?

I want to give a different color to the element if either of the two conditions exists.
Here is the code:
.btn-link{
color: $color-black;
margin: 0;
&:hover{
color: $color-light-blue;
}
&:not(.collapsed){
color: $color-light-blue;
}
}
Everything is good, but it will be better if you can combine the two selectors
I already tried:
&:hover&:not(.collapsed){
color: $color-light-blue;
}
But only the hover is identified
Same way as you do in CSS:
&:hover, &:not(.collapsed) {
color: $color-light-blue;
}
This sets the color only if the element is in a hover state or doesn't have the class collapsed.
You can put a comma between the two combining selectors, like this: &:hover, &:not(.collapsed) {
Full example:
HTML:
<span class="btn-link">one class</span>
<span class="btn-link collapsed">two class</span>
CSS:
$color-black: black;
$color-light-blue: lightblue;
.btn-link {
color: $color-black;
margin: 0;
&:hover, &:not(.collapsed) {
color: $color-light-blue;
}
}
JSfiddle.
Sorry, no StackSnippet. We still can't handle SCSS here!
You can try this simple change your code
/*SCSS*/
$color-light-blue : red;
.btn-link {
&:hover:not(.collapsed) {
color: $color-light-blue;
}
}
/*compiled CSS*/
.btn-link:hover:not(.collapsed) {
color: red;
}
<span class="btn-link">one class</span>
<span class="btn-link collapsed">two class</span>

Change label color when textarea has value

I need to change color of label when textarea receiving some value.
<form action="#" class="form-reverse">
<textarea name="order-background__bussiness" id="order-background__bussiness" cols="30" rows="10"></textarea>
<label for="order-background__bussiness">What are the company’s objectives?</label>
</form>
When we focusing textarea it works fine with this code:
textarea:focus ~ label{
color: #55c57a;
}
But, I need this color: color: #ff8086; when we don't have any values, and green one(as on image above) when anything written on textarea.
I've tried :active , but it works only when Mouse clicked:
textarea:active ~ label{
color: #ff8086;
}
Maybe someone has a solution for this?
PS: I do have a solution for this with JS , but I'm curious if there is any solution with SASS as well?
You can use the css valid property, it will match if the textarea is a valid field you can set the required attribute and it will match the valid selector if valid...
https://www.w3schools.com/cssref/sel_valid.asp
textarea:valid + label{
background: #ff0000;
}
<textarea required="required"></textarea><label>label</label>
You can also try like this, this will work fine as above:
textarea:not(:invalid) + label{
background: #ff0000;
}
One further option, that avoids making the <textarea>, and other form elements, required is to use the :placeholder-shown pseudo-class; this does, of course, require that a placeholder attribute be set (although it can be set to a whitespace, or zero-length, string):
/* selects a <label> element immediately adjacent to
an element which has its placeholder string visible
to the user: */
:placeholder-shown+label {
color: #f90;
}
/* this selects all <label> elements, but is less specific
than the selector above; so will be 'overridden' in the
event that the previous selector matches: */
label {
color: limegreen;
font-size: 1.5em;
}
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-size: 1rem;
}
.form-reverse {
display: flex;
flex-direction: column-reverse;
width: 80vw;
margin: 0 auto;
}
textarea {
width: 100%;
min-height: 30vh;
}
:placeholder-shown+label {
color: #f90;
}
label {
color: limegreen;
font-size: 1.5em;
}
<form action="#" class="form-reverse">
<textarea name="order-background__bussiness" id="order-background__bussiness" placeholder=" "></textarea>
<label for="order-background__bussiness">What are the company’s objectives?</label>
</form>
JS Fiddle demo.
References:
:placeholder-shown (Selectors Level 4 spec).

Sass "semantically" nesting tags and classes

I am trying to enforce some kind of semantic css class nesting in Sass. I want to enforce that css code for sections can only be used in sections, to make sure that the <section /> tag is used where it should semantically.
But I am running in troubles with the use of & in my Sass files. Consider the following html:
<section class="section-home">
<h1 class="section-home__heading">Section heading</h1>
<p class="section-home__intro">This is some random text</p>
</section>
I would assume I could use the following code in Sass, but no:
section {
&.section-home {
background-color: white;
&__heading {
font-size: 5rem;
}
&__intro {
color: grey;
}
}
}
Sass renders it into the following CSS:
section.section-home{background-color:#fff}
section.section-home__heading{font-size:5rem}
section.section-home__intro{color:grey}
And that is not what I expect or need, I want:
section.section-home{background-color:#fff}
section.section-home .section-home__heading{font-size:5rem}
section.section-home .section-home__intro{color:grey}
Is this a bug? Am I doing something wrong here?
Simply change the CSS to:
section {
&.section-home {
background-color: white;
.section-home {
&__heading {
font-size: 5rem;
}
&__intro {
color: grey;
}
}
}
}
This way Sass will interpret this as:
section.section-home
section.section-home .section-home__heading
section.section-home .section-home__intro
This will solve your problem, but why call it ".section-" when you can simply call it ".home" when it already is restricted with the html tag.
section {
&.section-home {
background-color: white;
.section-home__heading {
font-size: 5rem;
}
.section-home__intro {
color: grey;
}
}
}

Why do comma separated placeholder rules not get applied in css?

If I apply the following rule to an input element with id #one then the placeholder color will change,
#one::-webkit-input-placeholder {
color: red;
}
But if I use comma separater to combine placeholder rules of different browsers then the color doesn't apply, e.g.
#two::-webkit-input-placeholder,
#two::-moz-placeholder{
color: red;
}
Working example:
#one::-webkit-input-placeholder {
color: red;
}
#two::-webkit-input-placeholder,
#two::-moz-placeholder{
color: red;
}
<input id="one" type="text" placeholder="one">
<input id="two" type="text" placeholder="two">
Why does the #two placeholder not change its color to red?
This is because a browser will only apply a rule form a selector it can fully interpret.
For a webkit type browser -webkit-input-placeholder is valid but -moz-placeholder is not, so it trashes the entire selector, and vise-versa for a geeko based browser.
The solution is to separate browser specific selectors.
#two::-webkit-input-placeholder{
color: red;
}
#two::-moz-placeholder{
color: red;
}
I know it is now a complete answer, but you could add different classes for each input
#one::-webkit-input-placeholder {
color: red;
}
#two::-webkit-input-placeholder{
color: red;
}
#two::-moz-placeholder{
color: red;
}
<input id="one" type="text" placeholder="one">
<input id="two" type="text" placeholder="two">

Resources