What Does an "&" Before a Pseudo Element in CSS Mean

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



Leave a reply



Submit