I need to target nested class inside clasNames.
Check my code first:
<div className={containerCss}>
<Container> </Container>
</div>
And inside CSS
.Header {
width: 100%;
.test {
width: 700px;
}
&.test--center {
background: red;
}
}
I want to add tes class and target Container
if test true to target class test
You should use a ternary operation.
<div className={isHeader ? "class if it is true" : "class if it is false}></div>
Related
As you can see, I have a variation for .mainContainer in the form of &--alt. However, I need to repeat .mainContainer__content inside the &--alt class to say that if there's a .mainContainer--alt in the parent container, then .mainContainer__content will have a different styling.
Is there a better way to write this as it seems to defeat the purpose of using the shorthand version if I am going to write out the complete class name in this particular example.
CSS:
.mainContainer {
// SOME CSS properties
&--alt {
.mainContainer__content {
// SOME CSS properties
}
}
&__content {
// SOME CSS properties
}
}
HTML:
<div class="mainContainer">
<div class="mainContainer__content">
// some style
</div>
</div>
HTML (with alt):
<div class="mainContainer mainContainer--alt">
<div class="mainContainer__content">
// some other style
</div>
</div>
You can save the main class in a variable like this
.mainContainer {
$self: &;
// SOME CSS properties
&--alt {
#{$self}__content {
// SOME CSS properties
}
}
&__content {
// SOME CSS properties
}
}
Another option is to put the modifier on the
.mainContainer__content e.g. .mainContainer__content--alt
check this link: https://www.w3schools.com/Css/css_attribute_selectors.asp
I uesed attribute selector where class ends with [class$="value"]
.mainContainer {
// SOME CSS properties
&[class$="--alt"] {
.mainContainer__content {
// SOME CSS properties
}
}
&[class$="__content"] {
// SOME CSS properties
}
}
but again I dont recommend write it this way.
you can try this.
#mixin generate-sizes($class) {
.#{$class}__content {
font-size: 12px;
}
.#{$class}--alt {
font-size: 14px;
}
}
#include generate-sizes("mainContainer");
I have three class : product1, product2, product3. I can add css to all these class as follows:
.product1, .product2, .product3{
// add css here
}
But I am looking for more cleaner code to track 1 to 3 followed by 'product' and add css to these. My expectation can be Pseudocode Examples:
.product1to3{
// fun with css.
}
Is there any approach in css?
There is no such kind of css pseudo on what you wanted to achieve.
You can try to use SASS to achieve what you wanted.
and then use the #for Directive
SASS
#for $i from 1 through 3 {
.product#{$i} { width: 20px; }
}
CSS
.product1 {
width: 20px;
}
.product2 {
width: 20px;
}
.product3 {
width: 20px;
}
Also you can try to use LESS
Hope this helps
pure css implementation JSfiddle
So basically you need an "Attribute Begins With Selector" i.e select all classes which start with "product" and then you can use nth child attribute to select range
div[class^="product"]:nth-child(n+4):nth-child(-n+5) {
background: red;
}
Really good article on complex css and nth:child
/* This selects all the elements which have the class name starting with
"product"
*/
[class ^= "product"] {
//CSS
}
If you have an unknown / high number of ".product(x)", and for whatever reason don't want to use an extra class to target them, you can get away with an attribute selector that matches all elements that have a class containing "product".
[class*="product"]
div{
border:2px solid tan;
height:40px;
}
[class*="product"]{
background:steelblue;
}
<div class="product1"> product 1 </div>
<div class="product2"> product 2 </div>
<div class="not"> not a product</div>
<div class="product3"> product 3 </div>
<div class="product4"> product 4 </div>
It occupies just 1 line of compiled CSS, so it's minimal footprint, but be careful how you apply it.
Not an answer for the OP but for others that may find their way here remember that you can use multiple classes for each element.
html
<div class="product product1"></div>
<div class="product product2"></div>
<div class="product product3"></div>
css
/* shared styling */
.product {
display: flex;
background-color: gray;
border: 1px solid red;
}
/* individual styling */
.product1 {
color: black;
}
.product2 {
color: white;
}
.product3 {
color: blue;
}
Let's say that I have a custom web element called <my-course> with its own style defined in the <style> tag inside the definition and I do not want to alter this element's file at all as it's an external dependency of my project.
This <my-course> element has a <div> child defined in the <template> tag.
Example:
<dom-module id="my-course">
<template>
<style>
::host {
padding: 5px;
background: rgba(0,0,0,.2);
}
div#progress {
height: 20px;
width: 100%;
background: red;
}
</style>
<h1>This is my custom course element</h1>
<div id="progress"></div>
</template>
<script>
class MyCourse extends Polymer.Element {
static get is() {
return 'my-course';
}
}
window.customElements.define(MyCourse.is, MyCourse);
</script>
</dom-module>
I want to make the div#progress green with "background: green;" (it's red by default) via an external stylesheet that is loaded in the same page as the custom element is attached/used.
I tried to do:
my-course div#progress {
background: green;
}
But it does not work, the progress div keeps being red. There seems there is no way to style the shadow dom from outside the element itself, I've tried my-course::content div#progress, and has no result (/deep/ and ::shadow are deprecated) I previously achieved this using ::shadow.
Anyone can help? Thanks
You should use CSS variables, such as:
::host {
--progress-background: red;
padding: 5px;
background: rgba(0,0,0,.2);
}
div#progress {
height: 20px;
width: 100%;
background: var(--progress-background);
}
And to overrride it:
my-course {
--progress-background: green;
}
More info here: https://www.polymer-project.org/2.0/start/first-element/step-5
style:
.airport-selections {
margin-top: 10px;
.airport-input {
width: 200px;
}
}
html:
<div class="airport-selections">
<label class="airport-label" for="airport-from">
Departure:
</label>
<input type="text" class="airport-input">
</div>
If I don't nest them, the width of the input is set to 200. This also happens with all of the styles on the page.
Your CSS is invalid, there is no such thing as nesting in CSS. Only Less or Sass, but you have a long way until then.
If you want to select elements from inside others, use
.father .child{
yourstyle
}
All elements with class child from inside all elements with class father will get the style applied to them.
.airport-selections {
margin-top: 10px;
}
.airport-input {
width: 200px;
}
/*or
.airport-selections .airport-input {
width: 200px;
}
*/
<div class="airport-selections">
<label class="airport-label" for="airport-from">Departure:</label>
<input type="text" class="airport-input">
</div>
Without a CSS precompiler, there's no such thing as nested CSS styles.
Check out SASS, or LESS for nesting and other options. But what you have there doesn't do what you think it does.
Suppose the following code:
<div id="body" class='bodyLogin'>
#body {
background-color: red;
}
I would like to override the background colour through the class attribute, like this:
#body .bodyLogin {
background-color: blue;
}
but this doesn't work.
Similarly:
.bodyLogin {
background-color: blue;
}
doesn't work due to CSS hierarchy.
The space between your two selectors is meaningful. In fact it is a selector: the descendant selector. It means you select all of class bodyLogin descendant of an element with id body.
Get rid of the space and you select elements that are both #body and .bodyLogin:
#body {
background-color: red;
}
#body.bodyLogin {
background-color: blue;
}
<div id="body" class='bodyLogin'>Test</div>