What does an & before a pseudo element in CSS mean?
That's LESS, not CSS.
This syntax allows you to nest selector modifiers.
.clearfix {
&:before {
content: '';
}
}
Will compile to:
.clearfix:before {
content: '';
}
With the &
, the nested selectors compile to .clearfix:before
.
Without it, they compile to .clearfix :before
.
In MUI, what does '& *' mean?
The sign &
related to css compiler, like scss.
The *
means all, as the sign >
means direct child.
Basically, it will refer to the element you are in his scopes, this case:
// element card
card: {
maxWidth: '475px',
// all direct children of the element card
'& > *': {
flexGrow: 1,
flexBasis: '50%'
},
}
What is &::before, &::after in CSS?
&::after
is actually nothing in CSS, but it is a feature of SASS/SCSS and is probably written in a context like this:
li {
/* some style 1 */
&::after {
/* some style 2 */
}
}
Which compiles to:
li { /* some style 1 */ }
li::after { /* some style 2 */ }
Basically, the ampersand in SASS pulls in the parent selector when it compiles to CSS.
EDIT
You can't use the ampersand in a .css
file, as it has no meaning, you can only use it in sass/scss files that are compiled to CSS using a SASS pre-processor.
Blog post (not mine) about ampersand in SASS:
http://www.joeloliveira.com/2011/06/28/the-ampersand-a-killer-sass-feature/
EDIT 2
Further answers:
Everything else is vanilla CSS, ::after
, ::before
are pseudo elements, .relative
and .radio
are class selectors, :checked
is a pseudo class for input types radio and checkbox, and +
is an adjacent sibling selector
MDN should be (one) of your authorities for CSS documentation, so I chose to link to their pages rather than simply copy and paste the contents of their documents into this answer.
EDIT 3
I realized I didn't specifically state what & + .relative
is.
I alluded to it initially when I said
the ampersand in SASS pulls in the parent selector when it compiles to
CSS
In the OPs linked example there is this code:
.radio:checked
& + .relative
label
... some styles here
When you consider that & pulls in the parent selector
you'll see compiled CSS as this:
.radio:checked + .relative label { ... some styles here }
In "plain english", if you will:
An element with a class of radio that is checked with an immediate adjacent sibling element that has a class of relative and a child of that element with a tag name of label.
:after and :before pseudo-element selectors in Sass
Use ampersand to specify the parent selector.
SCSS syntax:
p {
margin: 2em auto;
> a {
color: red;
}
&:before {
content: "";
}
&:after {
content: "* * *";
}
}
Styles for all Globally pseudo element like :before?
'*' is the universal selector that matches every element in your dom. It is possible to extend this selector call with pseudo selectors like :before and :after.
So you can use: *:before, *:after {...}
See this example: https://codepen.io/anon/pen/vPRgmL
EDIT:
Your code does not work because of the specificity of your universal selector.
'div' has a higher specificity than '*' so div wins here.
See more here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
CSS pseudo-element ::Before does not work
Is there an element outside of of the .image
div in your test page? I can see the ::before
if I do that.
#home .image::before {
content: 'asdasd';
height: 100%;
width: 100%;
background: rgb(92, 226, 43);
position: absolute;
top: -16.8%;
left: 16.7%;
z-index: 1;
}
<div id="home">
<div class="image">
<img src="https://images.unsplash.com/photo-1542831371-29b0f74f9713?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cHJvZ3JhbW1lcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" alt="Código de Programação" />
</div>
</div>
What does pseudo mean in CSS?
Supposed or purporting to be but not really so; false; not genuine:
— https://en.oxforddictionaries.com/definition/pseudo-
A pseudo-element is something that acts like an element, but is not an element.
What is the difference between :before and ::before?
This distinguishes pseudo elements from pseudo classes.
The difference between pseudo classes and pseudo elements is described at http://www.d.umn.edu/~lcarlson/csswork/selectors/pseudo_dif.html
What is the difference between pseudo-classes and pseudo-elements?
From https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements
Pseudo-class :
A CSS pseudo-class is a keyword, preceded by a colon (:), added to the end of selectors to specify you want to style the selected elements, and only when they are in certain state. For example, you might want to style an element only when it is being hovered over by the mouse pointer, or a checkbox when it is disabled or checked, or an element that is the first child of its parent in the DOM tree.
Examples:
- :active
- :checked
- :nth-child()
- :first
- :hover
Pseudo-elements ::
Pseudo-elements are very much like pseudo-classes, but they have differences. They are keywords, this time preceded by two colons (::), that can be added to the end of selectors to select a certain part of an element.
Examples:
- ::after
- ::before
- ::first-letter
- ::first-line
- ::selection
- ::backdrop
As stated by @stephanmg:
In practice ::before is used as :before and ::after is used as :after
because of browser compatibility. Both are pseudo-elements, but may
look like pseudo classes. This might be confusing if you read CSS
code.
Related Topics
What Are the Rules For CSS Media Query Overlap
Cross Site Scripting in CSS Stylesheets
How to Make a Sticky Footer Using Css
How to Target a :Before or :After Pseudo-Element With a Sibling Combinator
How to Include One CSS File in Another
Dynamically Change Color to Lighter or Darker by Percentage Css
Placing Unicode Character in CSS Content Value
How to Dynamically Add a Class to Manual Class Names
Css Animation and Display None
When Will an ≪A≫ Tag Not Inherit Color Attribute of Parent Tag
How to Create Equal Height Columns in Pure Css
Relationship Between !Important and CSS Specificity
How to Dynamically Generate a List of Classes With Commas Separating Them
A Grid Layout With Responsive Squares