I want to apply one CSS rule for multiple selectors. like this:
.btn-group.pull-right.with_space .btn + .btn, .btn-group.pull-right.with_space i + i{
margin-left: 10px;
}
Now my question is, if there's a shorter way to do it. (since the parent elements are the same for both selectors, and the different is only in the last child).
To expand on my comment, if you choose to use a CSS pre-processor such as SASS or LESS, you can do nested selectors, like so:
/* SASS example */
.btn-group.pull-right.with_space {
i + i, .btn + .btn {
/* ... */
}
}
After compiling, the resulting CSS will be similar to what you had already written.
Sometimes, it might be better to add a common class to the elements that are sharing styles. So, in your .btn + .btn and i + i elements, add a class, such as btn_and_i, so you can target them with a single selector:
/* CSS example */
.btn_and_i {
/* ... */
}
If you're hell-bent on making this the "shortest" selector possible, then add a single-character class to the targeted elements, such as "a".
.a {
/* ... */
}
Related
I want to select a child dom with below css selector:
.parentA .child{
}
.parentB .child{
}
how can I combine them into one selector? I have tried below but doesn't work:
.parentA,.parentB .child{
}
To answer your specific question, there is no OR in CSS. There is only AND and you use , (comma) for it.
Which is to say whenever you want to assign the same set of rules to more than one selector, you can separate each case using a comma:
.parentA .child,
.parentB .child {
/* rules here */
}
They apply separately, which is to say the above is equivalent with this non DRY (hence wrong) way of writing it:
.parentA .child {
/* rules here */
}
.parentB .child {
/* rules here */
}
To apply the DRY principle to selectors, if they share a pattern, you could use SASS (or other pre-processors) and nest selectors, like this:
.parentA, .parentB {
.child {
/* rules here */
}
}
But SASS is a CSS pre-processor which, when parsed, will result in the CSS mentioned initially.
Have you tried?:
.parentA > .child,
.parentB > .child{
}
In plain CSS you have to repeat the entire selector, .parentA .child, .parentB .child, but if you use LESS, Sass or other preprocessors, you can do:
.parentA, .parentB {
.child {
color: red;
}
}
Which will get compiled out to the former for you so you don't have to repeat yourself.
How to apply same style with having two different parent classes that appears unique on each page body in magento2. Like i needed this in scss file which have deep nested structure but only its top parent alter for each page. for example i want this
class1 or class 2{
class3{
class5{
}
}
class4{
}
}
enter code here
I want to if its either class1 or class2 comes in html this styling should be apply. Thanks
define your root classes comma-separated
.class1, .class2 {
/* other selectors here */
}
so SASS will compile this code into
.class1 {
/* other selectors here */
}
.class2 {
/* other selectors here */
}
Anyway it's worth to remark that using multiple classes as ancestors of a scope will create redundant CSS code in output and it could be useful try to find a single selector (if possible, e.g. maybe magento allows to put a specific class only for both the pages?)
you can do something like this
.class1, .class2 {
.class3 {
/*your style */
.class5 {
/*your style */
}
}
class4 {
/*your style */
}
}
only thire parent class .class1 or .class2 only then style apply to class3, class5, and class4
I am trying to figure out the best way to accomplish reusing some of the nested styles in Less to prevent duplication, but I am not sure if I have found the best way.
Right now I have something like:
.category-link,
.caption-link {
background-color: #linkColour;
font-family: #linkFont;
max-width:2em;
a {
/* INNER LINK STYLES */
text-decoration:none;
white-space:nowrap;
/* ...INNER LINK STYLES CONTINUE... */
}
}
Now I want to apply those same inner link styles to the selector .action-link a without applying the outer styles to .action-link.
I get my intended output if I do it this way:
.inner-link-styles() {
/* INNER LINK STYLES */
text-decoration:none;
white-space:nowrap;
/* ...INNER LINK STYLES CONTINUE... */
}
.category-link,
.caption-link {
background-color: #linkColour;
font-family: #linkFont;
max-width:2em;
a {
.inner-link-styles;
}
}
.action-link a {
.inner-link-styles;
}
which doesn't require any duplication, but I'd prefer to keep those styles in their current location, where they are relevant, than to move them out to mixins.less and increase complexity for the next developer to troubleshoot.
What felt intuitive, but is clearly wrong, was something like this:
.category-link,
.caption-link {
background-color: #linkColour;
font-family: #linkFont;
max-width:2em;
& a,
.action-link a {
/* INNER LINK STYLES */
text-decoration:none;
white-space:nowrap;
/* ...INNER LINK STYLES CONTINUE... */
}
}
but is there some other prefix I can apply to a selector to have it based absolutely, rather than relative to it's nesting level?
Absolute selectors can't be added within a nested block because once we nest it under another block, the inner selector is considered as a child of the outer one (like in the DOM) unless we add &. to the selector (in which case, the inner one could be another class on the parent itself).
Using mixins or the :extend feature are the best options for your case because you are assigning a set of common properties to multiple elements.
Since parent selector is known (it is either .category-link a or .caption-link a), you can extend the properties of that selector into .action-link a also. This would extend only the properties of the inner link and not that of its parent.
I don't think this increases the complexity for the next developer to troubleshoot because changing the properties in the original .category-link a will change the properties for .action-link a also.
.category-link,
.caption-link {
background-color: blue;
font-family: Arial;
max-width:2em;
a {
/* INNER LINK STYLES */
text-decoration:none;
white-space:nowrap;
/* ...INNER LINK STYLES CONTINUE... */
}
}
.action-link {
a {
&:extend(.category-link a);
}
}
This question already has an answer here:
Append the parent selector to the end with Sass
(1 answer)
Closed 8 years ago.
How can I use the ampersand in SCSS to reuse the parent selector as suffix?
I came from LESS CSS and are doing my first project in SCSS right now. In LESS I could use the ampersand & to reference the parent selector at any point in a selector. I seems to me like this operator has some quirks in SCSS.
Example:
.grid {
/* grid styles */
ul& {
/* grid styles if this class was set to an UL element */
}
}
In LESS CSS this compiles to the following and this is what I need in most cases:
.grid {
/* grid styles */
}
ul.grid {
/* grid styles if this class was set to an UL element */
}
But in SCSS this throws an exception. There is another notation in SCSS looking like this:
.grid {
/* grid styles */
ul#{&} {
/* using SCSS escaping syntax*/
}
}
But this again gives me the unexpected result of:
.grid {
/* grid styles */
}
.grid ul.grid {
/* Uh SCCS, what happened now? */
}
Is there a way in SCSS to reuse the parent selector when it is not the first part of a selector?
You can use the #at-root directive to produce a rule that is generated outside its definition scope but that retains the value of its parent (&)
.grid {
/* grid styles */
#at-root {
ul#{&} {
/* using SCSS escaping syntax*/
}
}
}
Output
.grid {
/* grid styles */
}
ul.grid {
/* using SCSS escaping syntax*/
}
Tested on sassmeister
Further information on SASS documentation page
In the linked code for the blueprint CSS framework, there is a style defined for a div.class selector and just the .class selector. Isn't this redundant? Or is there a more subtle reason for defining the class with two selectors?
https://github.com/joshuaclayton/blueprint-css/blob/master/blueprint/src/grid.css (lines 229-235)
/* In case you need to add a gutter above/below an element */
div.prepend-top, .prepend-top {
margin-top:1.5em;
}
div.append-bottom, .append-bottom {
margin-bottom:1.5em;
}
Interesting question. I've not used Blueprint, but then if you choose to override either div.prepend-top or .prepend-top, only that selector's styles will be overridden.
That means doing this:
.prepend-top { margin-top: 1em; }
Will leave the styles for <div>s with that class unaffected (still a 1.5-em top margin), because div.prepend-top is a more specific selector and so will take precedence for <div> elements.
And doing this:
div.prepend-top { margin-top: 1em; }
Will leave the styles for other elements with that class unaffected, because of the div type selector. Likewise for the append-bottom class.
Again I've not used Blueprint, but I think it has something to do with how it expects your HTML to be structured.