In Angular(2+), component's CSS are encapsulated by attribute selector.
e.g. When I wrote the following CSS,
.myClass { ... }
div { ... }
div.myClass { ... }
div .myClass { ... }
then Angular compiles as following
.myClass[_ngcontent-htp-42] { ... }
div[_ngcontent-htp-42] { ... }
div.myClass[_ngcontent-htp-42] { ... }
div[_ngcontent-htp-42] .myClass[_ngcontent-htp-42]{ ... }
Why?
I understand importance of encapsulation.
However, I think that it is also possible to use css-class. Like this
._ngcontent-htp-42 .myClass { ... }
._ngcontent-htp-42 div { ... }
._ngcontent-htp-42 div.myClass { ... }
._ngcontent-htp-42 div .myClass { ... }
What are the advantages of using attribute selector?
Related
hey I have a spa application and using i18n with 4 languages
I want to have a clear code in my CSS
html[lang|="ar"].test { a }
html[lang|="tr"].test { a }
html[lang|="ar"].test1 { b }
html[lang|="tr"].test2 { c }
I write like this but I want to merge them in one section like this :
html[lang|="ar"] --> { .test{a} .test2{b} }
html[lang|="tr"] --> { .test{a} .test2{c} }
it's possible to write all CSS of my tr lang in one section?
You cannot nest CSS selector but you may use the selector :is() or :where() .
https://developer.mozilla.org/en-US/docs/Web/CSS/:where
https://developer.mozilla.org/en-US/docs/Web/CSS/:is
here an example
:where([lang|="ar"], [lang|="tr"]).test {
color: red
}
:where([lang|="ar"].test, [lang|="ar"].test1) {
font-weight: bold
}
:where([lang|="tr"].test1, [lang|="tr"].test2) {
color: green
}
<span lang="ar" class="test">hello</span>
<span lang="ar" class="test1">the</span>
<span lang="tr" class="test1">world</span>
<span lang="tr" class="test2">!</span>
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*/
}
}
}
}
I'm getting into SCSS trying to organise my css code and I came about this problem which peeked my interested as to why it's throwing a error?
here some example code:
<div class='bot'>
<div class='bot-active bot-awake'>
//...
</div>
</div>
And my SCSS looks like:
.bot {
&-active {....}
&-awake {....}
// this will not work.
&-active.&-awake {
...
}
}
You can use interpolation #{}
So
.bot {
&-active {....}
&-awake {....}
// this will work.
&-active#{&}-awake {
...
}
}
will result in
.bot-active {
...
}
.bot-awake {
...
}
.bot-active.bot-awake {
...
}
Demo at https://www.sassmeister.com/gist/4b8eb66140de9da983650b41a6df66ae
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;
}
}
}
Here is a simplified snippet of my code:
<li id="work-5" class="work-5 class-B">
<div>some other stuff</div>
<div class="class-A"></div>
</li>
<li id="work-6" class="work-6 class-C">
<div class="class-A"></div>
</li>
I want to apply some CSS styling to the element with class-A which is under the tree of an element with class-B. In other words I want to apply a different style to two elements with the same class (class-A) which are somewhere (not necessarily first child) under the tree of two different elements with distinct classes. Can I use CSS selectors to achieve this?
Basic CSS:
.class-B .class-A {
...
}
Two class selectors and a descendant combinator!
.class-B .class-A {
/* ... */
}
Sure can. Just use the parent class to target it.
http://jsfiddle.net/DpddQ/
.class-B .class-A { background: blue; color: white; }
.class-C .class-A { background: red; }
yes, there are a lot of alternatives to this:
#work-5 .class-A { }
#work-6 .class-A { }
or
.work-5 .class-A { }
.work-6 .class-A { }
or
#work-5.work-5 .class-A { }
#work-6.work-6 .class-A { }
or
#work-5.work-5.class-B .class-A { }
#work-6.work-6.class-C .class-A { }
Depending on your needs, but the more specific your selector is, the more it has precedence.