I am using BEM Scss explain please how to select inside nth-child element.
I tried below format but it didn't work for me
<div class="bookearly-container" >
<div class="row bookearly-container__row">
<div class="col-xs-12 col-md-4 bookearly-container__col">
<div class="bookearly-container__discountcontainer">
</div>
<div class="bookearly-container__discountcontainer">
</div>
<div class="bookearly-container__discountcontainer">
</div>
</div>
</div>
</div>
MY BEM Scss I added nth-child 3rd element children element that is not working:
.bookearly-container {
&__row {
margin-bottom: 4.6rem;
& > :nth-child(3) {
&__discountcontainer { -- this element not selected
&:before {
display: none;
}
}
}
}
}
Can you please explain how to select? Thanks in advance.
You are using the child combinator (>) inside .bookearly-container__row(line 4 in your CSS example), and the only direct child there is .bookearly-container__col.
If you want to target the .bookearly-container__discountcontainer elements you need to adjust the selector nesting a bit.
Try using the #debug directive combined with the & selector to see what you are actually selecting, it's helpful when you get no other clues.
This is a straight-forward suggestion to solve it:
.bookearly-container {
#debug &; // .bookearly-container
&__row {
#debug &; // .bookearly-container__row
}
&__discountcontainer:nth-child(3) {
#debug &; // .bookearly-container__discountcontainer:nth-child(3)
&:before {
#debug &; // .bookearly-container__discountcontainer:nth-child(3):before
}
}
}
If you are depending on the child combinator (>) for some reason, you could nest it inside a &__col selector, like so:
.bookearly-container {
&__col {
// Targeting any class ending with "__discountcontainer"
& > [class$="__discountcontainer"]:nth-child(3) {
&:before {
#debug &; // .bookearly-container__col > [class$="__discountcontainer"]:nth-child(3):before
}
}
}
}
Related
I have this navigation in HTML that looks like following:
<nav>
<div class="nav-item lvl-0">
<a></a>
<div class="sub">
<div class="nav-item lvl-1">
<a></a>
</div>
</div>
</div>
</nav>
I have some styles applied to all as in the navigation in the defaults layer, now I want to add separate styles for each level. I have this
nav {
.nav-item {
a {padding:0;}
&.lvl-0 {
> a {#extend .size-18;}
}
&.lvl-1 {
> a {#extend .size-13;}
}
}
}
Is there a way to write something along these lines:
nav {
.nav-item {
a {padding:0;
.lvl-0 > & {#extend .size-18;}
.lvl-1 > & {#extend .size-13;}
}
}
}
I´m trying to work on my own angular library which was compatible for Angular 4.
My goal is to make it compatible for Angular 9.
For some reason, css is not applied for a child of a component. This component is the last nested component.
HTML output
<ui-label _ngcontent-nln-c13="" _nghost-nln-c12="" ng-reflect-label="test">
<span _ngcontent-nln-c12="">test</span>
</ui-label>
label.component.scss
foo-label {
//font-style: italic; //<-- works here :/
> span{
font-style: italic; //<-- not applied
}
}
Someone has got an idea ?
I found why it´s not applied.
It´s due to a scope component.
foo-label was wrapped by foo-tag like this :
<foo-tag _ngcontent-han-c14="" _nghost-han-c13="" ng-reflect-label="test" ng-reflect-hlevel="1">
<h1 _ngcontent-han-c13="">
<foo-label _ngcontent-han-c13="" _nghost-han-c12="" ng-reflect-label="test">
<span _ngcontent-han-c12="">test</span>
</foo-label>
</h1>
</foo-tag>
And the style was written in tag.component.scss.
like this :
tag.component.scss
:host{
> h1 {
> foo-label { //<--applied css until here !
> span {
...
}
}
}
}
You can fix with ::ng-deep like this :
:host{
> h1 {
::ng-deep > foo-label {
> span {
...
}
}
}
}
Works with mixin as well like this :
:host{
> h1 {
#include h($light-color, $title-header-size, $application-toolbar-icon-size);
}
}
#mixin h($text-color, $font-size, $size-img){
margin-top: 0;
margin-bottom: 0;
flex-shrink: 0;
white-space: nowrap;
::ng-deep > foo-label {
#include label($text-color, $font-size, $size-img);
}
}
I want to color grid lines, depending on a condition.
I try this:
Java:
gridEtudiant.setClassNameGenerator(t -> {
if (t.getEtud_numero().startsWith("2")) {
return "error_row";
}
return "";
});
Css:
td.error_row {
background-color: red;
}
HTML
<td id="vaadin-grid-cell-1" tabindex="0" role="gridcell" part="cell body-cell" first-column="" reorder-status="undefined" aria-selected="false" class="error_row" style="width: 100px; flex-grow: 1; order: 10000000;"><slot name="vaadin-grid-cell-content-1"></slot></td>
We can see the 'class="error_row"' but it's not colored in red.
Vaadin version is 13.0.1
Your java code looks good.
Make sure you have a html file like webapp/frontend/styles/shared-styles.html containing something like:
<dom-module id="my-grid-theme" theme-for="vaadin-grid">
<template>
<style>
[part~="cell"].error_row {
background: red;
}
</style>
</template>
</dom-module>
If you then have your Layout containing the grid annotated with #HtmlImport("frontend://styles/shared-styles.html") (which you already seem to have as your custom css class is already applied) it should work.
Example:
grid.addColumn(Customer::getFirstname).setHeader("Firstname");
grid.addColumn(Customer::getLastname).setHeader("Lastname");
grid.addColumn(Customer::getEmail).setHeader("Email");
grid.setClassNameGenerator(customer -> {
if (customer.getFirstname().equals("Marco")) {
return "error_row";
} else {
return "";
}
});
becomes:
Using Sass, and Compass I would like to import one font file, but have 3 different sizes for it. But this question is more basic than that, The following code is an example of how I think maybe, but not sure sass class inheritance can work. what would be the best practice for something like this?
Something like
#include font-face("Kingthings Kelltika",font-files("http://www.fontsaddict.com/fontface/kingthings-kelltika.ttf"));
.Kingthings {
font-family:"Kingthings Kelltika";
.small{
font-size:.7em;
}
.medium{
font-size:.1em;
}
.large{
font-size:2em;
}
}
and then in the html say something like
<div class= "Kingthings small">
Your selectors will never be reached how you have defined them:
Here is an easy way to do what you are looking for:
http://jsfiddle.net/twT2e/
<div class= "Arial font-lg">
Sample Text
</div>
.Arial { font-family:"Arial"; }
.font-sm { font-size:.7em; }
.font-md { font-size:1em; }
.font-lg { font-size:2em; }
If you want to use SASS to provide some sort of hierarchy to your selectors it would look something like this;
<div class= "Arial">
<div class="font-sm">Sample Text1</div>
<div class="font-md">Sample Text1</div>
<div class="font-lg">Sample Text1</div>
</div>
.Arial { font-family:"Arial";
.font-sm { font-size:.7em; }
.font-md { font-size:1em; }
.font-lg { font-size:2em; }
}
I've seen somewhere the ability use * for ID or class selectors with SASS...what is the right way to do this?
For example I want to select all div id's inside a parent div. I would imagine something like this:
<div id="parent">
<div id="sub1">
<div class="icon"></div>
<div class="content"></div>
</div>
<div id="sub2">
<div class="icon"></div>
<div class="content"></div>
</div>
#parent {
#* {
}}
You can use only a css selector, like it:
#parent {
div[id] {
// styles
}
}
or
#parent {
div[id^='sub'] {
// styles
}
}
If the children are named in an orderly fashion, you could make it easier to update using the #for directive:
$num-of-children: 2
#for $i from 1 through $num-of-children
#sub-#{$i}
#extend %parent-children
#parent
%parent-children
//styles
In addition, if the ids are more arbitrary, you can pass a list into the #each directive to achieve a similar effect:
$children: sam ramond lemons butter
#each $child in $children
##{$child}
#extend %parent-children
#parent
%parent-children
//styles