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
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.
Is there a way to get the below to work?
.class1 {
line-height:20px;
}
.class2 {
height: class1.line-height;
}
I know that css variables would be the way to go but since it is in experimental phase, it would not be a suitable for our project. Is there any other way?
You can't really use dependencies like that in CSS without a preprocessor such as SASS or LESS. But you can apply more than one class to the HTML.....
<div class="class1 class2"></div>
In this case, class1 would contain the line-height, then class2 would contain any other properties you want to apply to that particular div.
Any similar properties between class1 and class2 would allow class2 to take precedence, since it's loaded after class 1, assuming the CSS hierarchy is logical.
For example:
.class1 { line-height: 1.3; background-color: red;}
.class2 { background-color: blue; }
The div would have a line-height of 1.3x and a background color of blue.
yeah.. you can't use dependencies like that in CSS.
you have to use SASS or LESS..
you can do like this in SASS
.class1 {
line-height:20px;
}
.class2 {
#extend.class1
}
Five years later...
I know that css variables would be the way to go but since it is in experimental phase, it would not be a suitable for our project.
As it's 2021 (and no-one is using Internet Explorer 11 anymore, phew, and all the major browsers fully support CSS Variables CSS Custom Properties) so you can now use var().
If you simply want to only define 20px once to avoid repeating yourself in CSS, then set a custom-property on a common ancestor of both .class1 and .class2 elements: most people use html (or html:root or just :root) for this:
:root {
--my-height: 20px;
}
.class1 {
line-height: var(--my-height);
}
.class2 {
height: var(--my-height);
}
Now, if you want .class2 elements to "inherit" their height: from any ancestor class1 elements instead of <html>, then this should work:
:root {
--my-height: 50px; /* Default value for .class2 elements which are not descendants of .class1` */
}
.class1 {
--my-height: 20px; /* Redefining the value */
line-height: var(--my-height);
}
.class2 {
height: var(--my-height);
}
...or if you want only .class2 descendants of .class1 to use the value:
:root {
}
.class1 {
--my-height: 20px;
line-height: var(--my-height);
}
.class1 .class2 {
height: var(--my-height);
}
But you probably shouldn't be setting line-height anyway - doing-so is a sign that you're misusing display: inline; or vertical-align:;.
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 {
/* ... */
}
I have two css classes A and B that are applied on the same element. I want to change class A only when it has class B as its sibling. Is there any css selector that can do this?
You can apply styles to different classes as usual:
.A {
/* Styles for class A */
}
.B {
/* Styles for class B */
}
Then chain both classes to apply more styles to elements only with both classes:
.A.B {
/* Styles for elements with both classes A and B only */
}
I have a style rule I want to apply to a tag when it has two classes. Is there any way to perform this without JavaScript? In other words:
<li class="left ui-class-selector">
I want to apply my style rule only if the li has both .left and .ui-class-selector classes applied.
You mean two classes? "Chain" the selectors (no spaces between them):
.class1.class2 {
/* style here */
}
This selects all elements with class1 that also have class2.
In your case:
li.left.ui-class-selector {
}
Official documentation : CSS2 class selectors.
As akamike points out a problem with this method in Internet Explorer 6 you might want to read this: Use double classes in IE6 CSS?
Chain selectors are not limited just to classes, you can do it for both classes and ids.
Classes
.classA.classB {
/*style here*/
}
Class & Id
.classA#idB {
/*style here*/
}
Id & Id
#idA#idB {
/*style here*/
}
All good current browsers support this except IE 6, it selects based on the last selector in the list. So ".classA.classB" will select based on just ".classB".
For your case
li.left.ui-class-selector {
/*style here*/
}
or
.left.ui-class-selector {
/*style here*/
}
You can use these solutions :
CSS rules applies to all tags that have following two classes :
.left.ui-class-selector {
/*style here*/
}
CSS rules applies to all tags that have <li> with following two classes :
li.left.ui-class-selector {
/*style here*/
}
jQuery solution :
$("li.left.ui-class-selector").css("color", "red");
Javascript solution :
document.querySelector("li.left.ui-class-selector").style.color = "red";