Bad title, don't know how to explain briefly.
Basically, I have a flex div which contains images and paragraphs inside of it. I want to use a selector so it selects all the child elements within the div and make them all the same size.
I saw this but I don't know what it is or if it does what I need:
.container > * {flex-basis: 100%;}
I'm not sure what > or * means, I would appreciate an explanation please :) Thanks
.container > * {flex-basis: 100%;}
* selector, literally means select all the children in the container and set a particular CSS on them.
From GeeksForGeeks:
The asterisk (*) is known as the CSS universal selectors. It can be used to select any and all types of elements in an HTML page. The asterisk can also be followed by a selector while using to select a child object. This selector is useful when we want to select all the elements on the page.
Please refer https://www.geeksforgeeks.org/what-is-the-use-of-asterisk-selector-in-css/
And > is called the child selector. As per GeeksForGeeks:
Child Selector: Child Selector is used to match all the elements which are child of a specified element. It gives the relation between two elements. The element > element selector selects those elements which are the children of specific parent. The operand on the left side of > is the parent and the operand on the right is the children element.
Please refer this article from GeeksForGeeks for better understand and best way to check them is by practice and observing yourself how they differ.
https://www.geeksforgeeks.org/css-child-vs-descendant-selectors/
.container > * {flex-basis: 100%;}
Set flex-basis: 100% on
* all elements
> directly under every parent with class .container.
If you want only img and p elements you would use:
.container > img, .container > p {
flex-basis: 100%;
}
> means direct descendant or a child tag. So for example:
<div class='container'>
<p></p>
<p>
<div>
</div>
</p>
</div>
we will select both the p tags but not the nested div within the second p tag.
* means all, so .container > * means "select all the immediate children of a tag with the container class applied to it".
