How to better write this code with three translations? I want to use only one class with three translations instead of three class, my code:
.test > li.nav-item:lang(en):nth-child(1):after {
content: "BNM";
margin-left: 10px;
}
.test > li.nav-item:lang(fr):nth-child(1):after {
content: "XYZ";
margin-left: 10px;
}
.test > li.nav-item:lang(pl):nth-child(1):after {
content: "YUI";
margin-left: 10px;
}
i want something like this:
.test > li.nav-item:nth-child(1)
&:lang(en):after {}
&:lang(fr):after {}
&:lang(pl):after {}
or something like this
Without a preprocessor you can reduce the code using a CSS variable, e.g.
:lang(en) { --label: "BNM"; }
:lang(fr) { --label: "XYZ"; }
:lang(pl) { --label: "YUI"; }
li.nav-item:nth-child(1)::after {
margin-left: 10px;
content: var(--label);
}
<ul class="test" lang="pl">
<li class="nav-item">1</li>
<li class="nav-item">2</li>
<li class="nav-item">3</li>
</ul>
If no lang attribute is defined then the --label variable will be undefined and will not be written in the ::after pseudoelement.
Related
I have a simple HTML and CSS with BEM. I want style for class .block__item-header-mark inside class .block__item-header--has-round.
I use CSS .block__item-header--has-round .block__item-header-mark { /styling here/ }. But I don't think this is good syntax.
My question is:
How to call .block__item-header-mark inside .block__item-header--has-round with better syntax in my SCSS code ?
My BEM syntax is good ?
Code
.block {
&__item {
&-header {
&--has-round {
/* How to call .block__item-header-mark with better syntax ??? */
.block__item-header-mark {
/*overide style*/
}
}
&-mark {
/*normal style*/
}
}
}
}
<div class="block">
<div class="block__item">
<div class="block__item-header block__item-header--has-round"><span class="block__item-header-mark"></span></div>
<div class="block__item-body"></div>
</div>
</div>
You can create a variable to refer to the scope you want
.block {
&__item {
&-header {
$header: &;
&--has-round {
#{ header }-mark {
/* override style */
}
}
&-mark {
/*normal style*/
}
}
}
}
HTML:
<div class="nav">
<a class="nav__link">click here...</a>
</div>
Expected CSS Output:
a.nav__link {
text-decoration: none;
}
My Current SCSS:
.nav {
a&__link {
text-decoration: error;
}
}
ERROR:
Invalid CSS after "a": expected "{", was "&__link"
"&__link" may only be used at the beginning of a compound selector.
If I understand well, you want something like that:
.nav {
a#{&}__link {
text-decoration: error;
}
}
<div class="data-row data-has-detail">
...
</div>
After expanding the div class becomes
<div class="data-row data-has-detail data-detail-shown">
...
</div>
I am trying to change the chevron on toggle with css but it doesn't work
<div class="btn-actions">
<span class="show-detail-new toggle-detail text-primary chk-move-down">
<span class="span-show-details"><i class="fa fa-2x fa-chevron-circle-down"></i></span>
<span class="span-hide-details"><i class="fa fa-2x fa-chevron-circle-up"></i></span>
</span>
</div>
less code
.data-has-detail {
.show-detail-new {
span.span-show-details {
display: block;
}
span.span-hide-details {
display: none;
}
}
}
.data-has-detail .data-detail-shown {
.show-detail-new {
span.span-show-details {
display: none;
}
span.span-hide-details {
display: block;
}
}
}
Toggle with css not working
When an element has multiple classes, you select them like so:
.data-has-detail.data-detail-shown
(No space - the space tells it it's a child element, no space says "this element has both classes)
Update - with LESS
Since you are using LESS, then the primary issue is the one I mentioned about spaces between selectors. In LESS you solve that with the & symbol, like so:
.data-has-detail {
.show-detail-new {
span.span-show-details {
display: block;
}
span.span-hide-details {
display: none;
}
}
/** the & will cause it to be ".data-has-detail.data-detail-shown" **/
&.data-detail-shown {
.show-detail-new {
span.span-show-details {
display: none;
}
span.span-hide-details {
display: block;
}
}
}
}
As an observation under the heading of "maintainable code", and for performance, I'd suggest finding a way to simplify this. Something like this would be a bit less verbose, and should work:
.show-detail-new {
.span-show-details {
display: block;
}
}
.show-detail-new {
.span-hide-details {
display: none;
}
}
.data-detail-shown {
.span-show-details {
display: none;
}
}
.data-detail-shown .span-hide-details {
display: block;
}
(Currently, your selectors blow out into a huge selector when compiled by LESS, so your CSS stylesheet is probably larger than it needs to be:
.data-has-detail .data-detail-shown .show-detail-new span.span-show-details {
display: none;
}
.... etc for other rules ...
I need to place a star, ★, on a Web page, repeatedly. Is there a way to specify a symbol and how many times it should appear, in HTML or CSS? E.g., something like this, but not necessarily the same syntax, in which an item is specified, along with a quantity:
<repeat n="5">★</repeat>
This will result in:
★★★★★
You could place the star as a repeating background image of an element; and tweak the width of the element via CSS. Something like:
.stars {
display: inline-block;
width: 13px;
height: 13px;
background-image: url(https://i.stack.imgur.com/KaEDC.png);
}
.stars-2 {
width: 26px;
}
.stars-3 {
width: 39px;
}
.stars-4 {
width: 52px;
}
.stars-5 {
width: 65px;
}
<span class="stars"></span><br>
<span class="stars stars-2"></span><br>
<span class="stars stars-3"></span><br>
<span class="stars stars-4"></span><br>
<span class="stars stars-5"></span>
Use content property like this:
Note: that using repeat is not recommended in your case its not a valid html tag, use div, span or a.
Demo
Use SCSS or LESS to generate style sheet like this.
CSS:
<style>
repeat {
display:block;
}
repeat[n="1"]:before {
content: "★";
}
repeat[n="2"]:before {
content: "★★";
}
repeat[n="3"]:before {
content: "★★★";
}
repeat[n="4"]:before {
content: "★★★★";
}
repeat[n="5"]:before {
content: "★★★★★";
}
</style>
HTML:
<repeat n="1"></repeat>
<repeat n="2"></repeat>
<repeat n="5"></repeat>
If you are willing to use jQuery (or just javascript but different code), you could do:
$(document).ready(function() {
$('[repeat]').each(function() {
var toRepeat = $(this).text();
var times = parseInt($(this).attr('repeat'));
var repeated = Array(times+1).join(toRepeat);
$(this).text(repeated).removeAttr('repeat');
});
});
Then when you have
<span repeat="5">★</span>
It will become
<span>★★★★★</span>
Try:
body{
counter-reset: Counter;
}
sameTypeElement::after{
counter-increment: Counter;
content:counter(Counter) " ★";
}
or simpler:
sameTypeElement::after{
content:'★';
}
sameTypeElement siblinging is unknown for different browsers, but must work with any level of nesting tiying to type of selector
If you just want to print the star a certain number of times you can use JavaScript:
for (var i = 0; i < 5; i++) {
document.write("★");
}
Will result in: ★★★★★
If you want to be able to access a particular star, you will need to wrap each star in a span and give it a unique id:
for (var i = 0; i < 6; i++) {
document.write("<span id=\"star" + i + "\">★</span>");
}
This will result in:
<span class="star0">★</span>
<span class="star1">★</span>
<span class="star2">★</span>
<span class="star3">★</span>
<span class="star4">★</span>
I have the following code to target buttons that are in a disable state:
.btn-default[disabled] {
background-color: lighten(#btn-default-bg, 30%)
}
Is it possible to use nested rules to target the disabled attribute? something similar to &:Hover
You can indeed, like this:
.btn-default {
&[disabled] {
background-color: lighten(#btn-default-bg, 30%)
}
}
http://jsbin.com/aKuLire/1/edit
You can even do further nesting:
input {
&[type="submit"] {
&[disabled] {
background: #blue;
}
}
}