This question already has answers here:
What does '&.' in '&.sub-title' indicates in scss?
(1 answer)
What does the & mean in an scss selector?
(1 answer)
What does an "&" before a pseudo element in CSS mean?
(4 answers)
Closed 4 years ago.
I came across some stying in my scss file which looks like this:
:host {
&::before {
content: '';
display: block;
width: 100%;
height: $channel-border-w;
background: $color-border-divider-bg;
}
}
does this mean to style the element before my host?
From MDN docs,
In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
The & before it indicates that it is adding this pseudo selector to the selector it is nested under, which is your host element.
The snippet you posted could be translated to:
:host::before {
... your styles here ...
}
& adds something selected to parent selector.
::before creates a pseudo-element as child of parent selector.
i let you the full doc here:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector
https://developer.mozilla.org/en-US/docs/Web/CSS/::before
https://css-tricks.com/the-sass-ampersand/
Related
This question already has answers here:
How can I apply styles to multiple classes at once?
(9 answers)
Closed 4 years ago.
Is theres a way with css only to apply a specific style to an element when using an id selector inside a css ??
html:
<div Id="MyClassId"> blablabla </div>
css:
.MyOwnFancyDiv{
font-size: 12pt;
color: #333333;
/* ... */
}
/**
Select a particular element and need to apply the MyOwnFancyDiv style
**/
#MyClassId{
/* want to apply the MyOwnFancyDiv style to this particular element */
}
Thanks
You asked:
I want to apply the MyOwnFancyDiv style to this particular element [the id element]
This can be done as specified -- only via CSS -- like so:
.MyOwnFancyDiv,
#MyClassId {
font-size: 12pt;
color: #333333;
/* ... */
}
This will apply all style rules to each element specified (so the class MyOwnFancyDiv and the id element MyClassId.
This should solve your question. If not, please can you edit and clarify the criteria and scope of your question. Thanks.
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 5 years ago.
I have Html structure below
<div>
<div class="experimental-bar experimental-bar-minimal"></div>
</div>
<div class="experimental-border">
<div class="container"></div>
</div>
CSS:
.experimental-bar { height: 50px; }
.experimental-bar-minimal {height: 25px; }
.container { height: ~"calc('100vh - 50px')"; }
I want to change height of container when experimental-bar-minimal class is called
I have used
div:has(.experimental-bar) + .experimental-border .f8-wi-container {
height: ~"calc('100vh - 50px')";
}
div:has(.experimental-bar-minimal) + .experimental-border .f8-wi-container {
height: ~"calc('100vh - 25px')";
}
Can anybody help me out. Thanks in advance
:has is not working
There is no < Selector in CSS, and there is currently no option to style a parent element depending on one of its childs. At least not with vanilla CSS, I am not sure if this could be achieved with a preprocessor like Sass, Less or Stylus.
There acually is a > Selector, which selects only direct childs of the parent node. Please read the MDN Documentation for further info.
Ther actually is the :has pseudo class, which works like the code below, but it is currently not supported by any browsers:
.parent:has(> child) {
/* Style Rules */
}
This question already has answers here:
:first-child not working as expected
(5 answers)
Closed 7 years ago.
I have tried to use :nth-child(n), which does not work as well, am I using this selector on the wrong elements?
on the element div with the following class, block_photo.
.block_photo:first-child, .block_video:first-child {
margin-left:0px;
}
http://tmptstdays4god.ucoz.com/
Your html markup is the following:
<section class="new photos">
<h4 class="title">...</h4>
<div class="block-photo">...</div>
<div class="block-photo">...</div>
...
</section>
first-child / nth-child
Matches an element if it is the first child.
.block_photo:first-child {
/* styles here apply to the .block_photo IF it is the first child */
}
In your case, because the first child is <h4>, the selector .block_photo:first-child matches no element.
first-of-type / nth-of-type
Matches the first element of a certain type
.block_photo:first-of-type {
/* styles here apply for the first .block_photo element */
/* that is what you need */
}
References:
W3C specification on first-child
W3C specification on first-of-type
This question already has an answer here:
Concatenating nested classes using SASS [duplicate]
(1 answer)
Closed 7 years ago.
I'm adding an 'down' class name to a div using js.
Is it possible in Sass to hit the 'down' class while styling the div
<div class="insight">
</div>
//add down class with js when clicked
<div class="insight down">
</div>
.insight{
background: gray;
height: 100px;
width: 100px;
&:down{
background: red;
}
}
As pointed out in the comments, you've used the wrong selector. In CSS : is a pseudo-element selector, for example span:hover, a:clicked, and so on.
You want an element with two shared classes, so . is fine:
&.down {}
will do exactly what you need. As you've noted & in SASS is the current scoped element so this will compile to
.insight.down
Which is valid CSS and exactly what you want.
This question already has answers here:
Ampersand (parent selector) inside nested selectors [duplicate]
(3 answers)
Closed 8 years ago.
Less
.list a{
.landscape&{
height: 100%;
}
}
Outputs
.landscape.list a {
height: 100%;
}
Which means "all a tags whose parents have both .landscape and .list"
Less
.list a{
&.landscape{
height: 100%;
}
}
Outputs
.list a.landscape {
height: 100%;
}
Which means "all a tags which have class 'landscape' and whose parents have .list"
And that makes sense. But if I remove the "a" tag from those selectors, the '&' only changes the concatenation order of .list and .landscape.
What's the point ? When should I use &.class and when should I use class.& ?
The & in Less denotes the parent selector. So wherever you put the &, it replaces it with the parent selector in the CSS, if you have a space before it.
If not, i.e., no space is given before the &, it becomes the child and appends the selector with its parent like in your case.
References:
Less CSS Secrets-of-the-Ampersand
Parent Selector
The article "LESS CSS: Secrets of the Ampersand" details the difference well. I'll highlight the key uses:
Attach a class to an existing selector
Change state based on parent classes
Filter a nested selector to only match certain elements
Avoid repetition when selecting repeated elements
Simplify combinatorial explosions
The latter is my favorite. I've used it to handle some crazy IE issues. Check this out:
/**
* Add a top border to paragraphs,
* but remove that border when a preceding paragraph already has one.
*/
p {
border-top: 1px solid gray;
& + & {
border-top: 0;
}
}
I think if you can wrap your mind around what this usage of & does, all the other uses become obvious.