how can I set styles for an element and some of his descendants? Like for example:
.datepick-month-header, .datepick-month-header select, .datepick-month-header input {
background-color: black;
color: #fff;
font-weight: bold;
}
in less documentation I've found nested styles, who works well, but I want to select BOTH $this and the descendants.
.datepick-month-header {
select, input { // this selects "select" and "input",
}
}
how can I set all the three elements (parent, childrens) in one declaration?
thank you
use & to reference the parent context, eg.
.a {
&, & .b .{
}
}
I know I can do this, but get redundancy code in output css:
.datepick-month-style {
background-color: #datepickMonthHeaderBackgroundColor;
color: #datepickMonthHeaderColor;
font-weight: bold;
}
.datepick-month-header {
.datepick-month-style;
select, input {
.datepick-month-style;
}
}
Related
Is it possible in CSS/SASS/LESS to combine multiple selectors with the same attribute into one selector without repeating the attribute?
For example:
div.foo[data="123"] {
color: red;
}
p.bar[data="123"] {
color: red;
}
p.bar[data="123"], div.foo[data="123"]{
color: red;
}
Combine them somehow? Such as this invalid scenario:
(div.foo, p.bar)[data = "123"] {
color: red;
}
You could do it like that:
div.foo,
p.bar {
&[data="123"] {
color: red;
}
}
first step:
combine your main selectors
second step:
adds the data selector
I have a root element div.container at my page, there is div.block.scarlet inside with red color for text.
But we also have body is a parent for div.container element. And when body has class .landing I need to make pink color instead of red.
I don't understand how write it correctly. Help with a syntax please!
/* how I do it now */
.container {
.block {
&.scarlet {
color: red;
}
}
}
body.landing .container {
.block {
&.scarlet {
color: pink;
}
}
}
Tooooo much extra copy-paste code! Is it possible to write in one line? Maybe a trick or smth like sass &. What I want:
.container {
.block {
&.scarlet {
color: red;
#if(body.landing || container.landing) { color: pink }
}
}
}
This is short rule that recolor my text if the root nesting element changed.
You need to use parent selector reference to construct complete selector from current context:
.container {
.block {
&.scarlet {
color: red;
body.landing & {
color: pink;
}
}
}
}
In LESS, you can reference a child selector as follows:
<div class="button">
<div class="button-text"> Text </div>
</div>
.button {
&-text {
color:red;
}
}
This will output:
.button .button-text { color:red; }
This is neat and ideal, however, when using a hover, is there a way to maintain the same / similar syntax for the child element? Currently, this wouldn't naturally work:
.button {
&:hover {
&-text {
color:red;
}
}
}
This won't work and as expected, outputs something along the lines of
.button:hover .hover-text { }
Is there a way to get the expected hover result without defining the full class name, in this instance ".button-text"?
Any help would be greatly appreciated.
Because the parents selector & represents all parent selectors (not just the nearest ancestor), nesting under hover, will always include the :hover text.
This rule:
.button {
&:hover &-text {
color:red;
}
}
Will provide the result (lessismore playgroud):
.button:hover .button-text {
color: red;
}
Targeting children in LESS is easy such as:
header {
a { color: white; }
}
But what I'm asking is how to assign color: white; to both the parent and the child? I can do:
header {
color: white;
a { color: white; }
}
But that is adding the same thing twice and I'm sure there's a better way in LESS.
If you really want nesting there, then:
header {
&, a {color: white}
}
For more details see Parent Selectors.
I had to covert some PSD-s into html, but every page had its own styling so I went forward and made one for each.
The client now requires them to be joined into a single one. Is that possible?
Thanks.
Edit: They don't have unique ID/classes.
Since you converted the PSD's to HTML, I assume you've still got access to the code? In which case, your best best is to give each page a unique identifier (class or ID) at a high enough level that you can specificy with parent / child selectors. Example:
Page 1:
<body id="aboutus">
Page 2:
<body id="services">
You can then target via CSS the elements that are on each page within the same CSS file (the laws of specificity will take effect: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/):
#aboutus h1 {
color: red;
}
#services h1 {
color: green;
}
Option 2 (Credit to Darren Sweeney):
In addition to adding an id / class to the body element I've mentioned above, you can make the process of adding styles for each page a lot easier by using a CSS preprocessing language such as SASS / SCSS. For example:
SCSS:
#aboutus {
h1 {
color: red;
}
p {
font-size: 10px;
}
a {
text-decoration: underline;
.active {
color: #fff;
}
}
}
#services {
h1 {
color: green;
}
p {
font-size: 15px;
}
a {
text-decoration: underline;
.active {
color: #000;
}
}
}