Lets say I have the following html:
<header class="header"> <div class="title"> <h1>Home</h1> </div> <div class="logo"> <img src="#" alt="Logo"> </div> <div class="account"> <div class="options"> </div> <div class="search"> </div> </div> </header>
And I have the following SCSS:
header { height: 4.1rem; div { width: 33%; float: left; height: 4.1rem; line-height: 4.1rem; color: #fff; &.title { h1 { font-weight: normal; font-size: 3rem; padding: 0; margin: 0; } } &.logo { text-align: center; } &.account { } } }
Now the problem that I have is that divs options
and search
are 33% percent of account
which is logic as I have div {width: 33%}
. I know I can select direct child elements with:
header { > div { } }
But this doesn't help even if I put the >
infront of all other classes. I also know I can say that the width should be 0 or what ever again in .account
but I would like to prevent this.
First defined the content in a . html file. In the HTML file in your content make sure that you are placing child tags or having child tags inside a parent tag. Once you are done with the HTML tag then use ” & ” and ” > ” in the SCSS file to style the direct children.
You can pass in a positive number as an argument to :nth-child() , which will select the one element whose index inside its parent matches the argument of :nth-child() . For example, li:nth-child(3) will select the list item with an index value 3; that is, it will select the third list item.
The CSS child combinator ( > ) can be used to select all elements that are the immediate children of a specified element. A combinator combines and explains the relationship between two or more selectors.
Try this:
... & > div {width: 33%;} div { float: left; height: 4.1rem; line-height: 4.1rem; color: #fff; ...
Take out div width and apply it only on direct children. Leave rest as is. Here is quick fiddle (remove .option
and .search
styles later, its only for visualisation).
Please edit your question and better explain what exactly you want to achieve.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With