score:2
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%'
},
}
score:1
the greater than sign (>) selector in css is used to select the element with a specific parent. it is called as element > element selector. it is also known as the child combinator selector which means that it selects only those elements which are direct children of a parent. it looks only one level down the markup structure and not further deep down. elements which are not the direct child of the specified parent is not selected.
the & character basically means “this”. here's some examples:
a { color:#ff0000; &:hover { color:#0000ff; } } will be compiled into: a { color:#ff0000; } a:hover { color:#0000ff; }
score:1
// selects all elements where the parent is a <card> element
card: {
'& > *': {
flexgrow: 1,
flexbasis: '50%'
}
}
//this same as
card > * {
flex-grow: 1;
flex-basis: 50%;
}
Source: stackoverflow.com
Related Query
- What does it mean when they say React is XSS protected?
- What does ...rest mean in React JSX?
- What does :: (double colon) mean in JavaScript?
- What does it mean to 'move this variable directly inside useEffect' in this error message?
- const App: () => React$Node = () => {...}: what does it mean this instruction?
- What does @format mean in new react native App.js?
- React Source code: What does it mean by "real internal dependencies"
- What does the @ symbol mean in a react import statement
- What does the symbol '&$checked' mean
- What does the isVisible property mean in intersectionObeserver API?
- What does the '@' mean in front of an import in React?
- What does "...this.props" mean in ReactJS?
- What does the className attribute mean in JSX?
- What does the question mark mean in the return statement in JS?
- const {name, value} = event.target -- what does this mean
- What does 'as' mean when importing a module?
- What does the colon mean in Javascript after function?
- What does forwardRef by a component in React dev tools mean and how can I use it?
- What does a null mean in React createElement()?
- What does "type" mean and is there is a special use for a question mark in ECMA 6?
- What does it mean that (JSX) is a syntax extension to javascript in React
- What exactly does "[HMR] Waiting for update signal from WDS..." mean
- What does the 'new' keyword before the parameter list mean in a typscript arrow function?
- What does it mean to have multiple instances of React?
- what does <{}> mean at the end of extension in javascript?
- What does Markup actually mean in JAMstack?
- What does it mean to unravel a circular linked list?
- What does it mean {...a11yProps(0)} in the component property?
- What does 'contravariance' on AbstractRecoilValue<T> mean in Recoil source type declarations?
- What does '& > * + *' mean in JSX (CSS)?
More Query from same tag
- Why is my button undefined in my test?
- Handle bar Template in React
- Flashing screen when changing route with Reactjs
- ReactJs: Is it possible to render DOM to document by class name?
- Scroll to the bottom of a scrollable div in react
- Featured.render(): A valid React element (or null) must be returned. Rendering a List of items
- How do you use props to reduce code of many checkboxes ReactJS
- Type error in declaration part in typescript (Angular/React)
- how navigate using the MenuItem? material-ui V1
- Cannot import image in public folder to src folder in ReactJS
- Should you create a custom eventWrapper component for react-big-calendar?
- CSS transition - Disappear and appear again
- Check if a condition is met before pushing a property into array ReactJS
- 'props' of undefined inside map closure
- Reactjs : Passing array as prop to child function component. Modifying the array in child is causing state mutation exception
- react redux keep same order when update
- Active class in pagination in React
- The page is not updated after adding an item
- Formik Validation Display Problem with bootstrap css
- How are boolean props used in React?
- react redux router display blank page
- React WebWorker using fat arrow syntax insted of class syntax
- Toggle with checkbox in react
- Dynamically rendering Custom Radio Button Component
- React's stopPropagation does not work for parent event handlers
- Why I am not able to display the first 10 columns in this React Table - ReactJS
- How to get specific value from react Component
- How to customize Ant table rowselection
- React not redirecting as intended when A function is called in the Routes route
- React Route Component handle all "/" routes EXCEPT for "/login"