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.
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.
Use the & with > inside the parent element like this:
.services {
& > div {
margin-bottom: 25px;
}
}
I am not certain I understand you. But I think you want a combination of direct children and child pseudo selectors, in pure CSS:
header > div:first-child {
}
Or, for the second div:
header > div:nth-child(2) {
}
You could also use the not selector:
header > div:not(.account) {
}
to exclude any unwanted div's.
Related
An expanded question on :
pure CSS multiple stacked position sticky?
is there a way to calculate the top position of the followup header in order to stack the headers as per the the example. I do not know the count of the amount of headers there will be so i cannot say:
.headers {position:sticky}
.header-1 {top:0;}
.header-2 {top:1em}
.header-3 {top:2em}
.header-4 {top:3em}
but would need to calculate the difference
HTML:
<div class="container">
<div class="headers header-1">header 1<div>
<div class="content">This is the content<div>
<div class="headers header-2">header 2<div>
<div class="content">This is the content<div>
<div class="headers header-3">header 3<div>
<div class="content">This is the content<div>
<div class="headers header-4">header 4<div>
<div class="content">This is the content<div>
I would need to somehow calculate the :nth-child or :type-of or so method as the list grows. not sure if it could be done in css but would like to know if it is possible
If the question is Can I use the n of nth-child or nth-of-type to calculate attributes automatically?
The answer is No, you can't, at least for now.
But there are several workarounds:
This one is not very elegant, but it's actually the most used one so far.
.bars span {
display: block;
height: 1em;
margin-bottom: 1em;
background-color: salmon;
}
.bars span:nth-child(1) {
width: 1em;
}
.bars span:nth-child(2) {
width: 2em;
}
.bars span:nth-child(3) {
width: 3em;
}
.bars span:nth-child(4) {
width: 4em;
}
// ... and many more
<div class="bars">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
And if you're using precompiled css such as scss, it can be shortened as:
#for $i from 1 through 20 {
.bars span:nth-child(#{$i}) {
width: #{$i}em;
}
}
The other one is using css variable. But you have to assign the variables manually:
.bars span {
display: block;
height: 1em;
margin-bottom: 1em;
background-color: salmon;
}
.bars span {
width: calc(var(--length) * 1em);
}
<div class="bars">
<span style="--length: 1;"></span>
<span style="--length: 2;"></span>
<span style="--length: 3;"></span>
<span style="--length: 4;"></span>
</div>
I am trying to add different padding to subsequent elements in a div. My DOM looks pretty simple.
<div class="parent">
<div>0</div>
<div>15</div>
<div>30</div>
...
</div>
So I would like for my first element to have 0 padding, my second 15, third 30 etc.
Using LESS, how could I make this work?
I have tried:
.parent div:nth-of-type(n) {
padding-left: n*15px;
}
Thank you!
I suppose you want to achieve a stair visually. In this case you can do it like below:
.parent {
line-height: 1.2em;
}
.parent>div:not(:first-child)::before {
content: "";
float: left;
width: 15px; /*your padding*/
height: calc(1.2em + 2px);
}
<div class="parent">
<div>0</div>
<div>15</div>
<div>30</div>
<div>45</div>
<div>60</div>
<div>75</div>
</div>
Using less(but you have to set the num of elements):
.parent (#indexstart,#index) when (#indexstart < #index ){
div:nth-child(#{indexstart}){
padding-left: (#indexstart - 1) * 15px;
}
.parent (#indexstart + 1,#index);
}
.parent (1,4);
See example
I want to select the first and the last child with CSS but it does not work. Please take a look at my Fiddle and help me:
.area {
height: 100px;
width: 100px;
}
.area:first-child {
background-color: red;
}
.area:last-child {
background-color: green;
}
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>
https://jsfiddle.net/rbw8dpsb/1/
I advise you to add a container as in your code they are childs of body BUT you don't know the last-child or the first-child of body as you may have other elements like script tags or other tags dynamically added (like in the snippet here or with jsfiddle or any other online coding tools).
.area {
height: 100px;
width: 100px;
}
.area:first-child {
background-color: red;
}
.area:last-child {
background-color: green;
}
<div>
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>
</div>
Here is a screenshot to show what is inside your body when you run the snippet:
As you may clearly notice, there is a div added at the end which is the last-child of the body. Adding a container will avoid you dealing with random settings and hidden elements added.
If you don't want to let all that divs in another structure you should use first-of-type and last-of-type instead of first-child and last-child
.area {
height: 100px;
width: 100px;
}
.area:first-of-type {
background-color: red;
}
.area:last-of-type {
background-color: green;
}
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>
As Temani Afif pointed, this solution is arbitrary and may not work in all the situations. As shown, it is not properly working on the code snippet but it does on JSFiddle for example. I.E. https://jsfiddle.net/vm1scerv/
I've successfully centred an inner div in a parent div but the elements contained in the inner div are not horizontally in line.
For my approach see demo.
I'm aware of the two most common apprroaches with centering a div in a div i.e. using HTML below:
HTML:
<div id="outer" style="width:100%">
<div id="inner">Foo foo</div>
Centering method 1:
#inner {
width: 50%;
margin: 0 auto;
}
Centering method 2:
#outer {
text-align: center;
}
#inner {
display: inline-block;
}
Correct me if I'm wrong but:
Method 1 seems suitable if the inner div is to have a set width.
Method 2 seems suitable if the width of the inner div is fluid and say
contains only one element as multiple elements aren't horizontally in line.
EDIT:
What I describe in method two above is the issue I'm having i.e. rather than the outcome as seen in my demo this is what I'm trying to achieve.
<< < March - 2016 > >>
I'm looking for the best way to remedy this whilst making sure the width of the centred div is dynamic.
Simply align the inner elements as you did with the outer ones? What's the issue?
#calendarmonthcontrols > div, #calendarmonthcontrols > a {
display: inline-block;
}
You need to add inline-block, that will position the elements in center.
Working example:
Updated Fiddle
/* Wrapper div. That makes the inner div into an inline element that can be centered with text-align.*/
#calendaroverallcontrols {
text-align: center;
}
/* This is a fluid div as width will be changing */
#calendarmonthcontrols {
display: inline-block;
}
#btnPrevYr {
text-decoration: none;
font-size: 35px;
}
#btnPrev {
text-decoration: none;
font-size: 35px;
margin-left: 20px;
}
#monthandyear {
vertical-align: bottom;
padding:0 10px;
}
#btnNext {
text-decoration: none;
font-size: 35px;
margin-right: 20px;
}
#btnNextYr {
text-decoration: none;
font-size: 35px;
}
#calendarmonthcontrols a {
position:relative;
top:10px;
}
#calendarmonthcontrols a,
#calendarmonthcontrols div {
display: inline-block;
}
<div id="calendaroverallcontrols">
<!-- <div id="year"></div> -->
<div id="calendarmonthcontrols"> <a id="btnPrevYr" href="#" title="btnPrevYr"><span><<</span></a>
<a id="btnPrev" href="#" title="btnPrev"><span><</span></a>
<!-- <input type="button" src="images/btnprevmonth.png" alt="Submit" id="btnPrev"/>-->
<!-- <div id="month"></div>-->
<div id="monthandyear">MARCH - 2015</div>
<!--<input type="button" src="images/btnnextmonth.png" alt="Submit" id="btnNext"/>--> <a id="btnNext" href="#" title="btnNext"><span>></span></a>
<a id="btnNextYr" href="#" title="btnNextYr"><span>>></span></a>
</div>
</div>
I have a parent div, that holds three div's. They are basically columns. I need to remove the margin on the last one but can't get the right selector
HTML:
<div class="productContainer">
<div class="productBox"></div>
<div class="productBox"></div>
<div class="productBox"></div>
<!--/ productContainer --></div>
Here's the CSS:
.productContainer {
width: 980px;
height: 400px;
display: block;
float: left;
}
How do you target the third child div of a parent? this should work no?
.productContainer > .productBox {
width: 320px;
height: 400px;
display: block;
float: left;
margin: 0 10px 0 0;
}
.produtContainer > .productBox nth:child(3) {
margin-right: 0;
}
While you can use the :last-child selector, it's not going to work in any version of IE before 8. Generally what I do in this situation is add a last class to the last element in the list:
<div class="productContainer">
<div class="productBox"></div>
<div class="productBox"></div>
<div class="productBox last"></div>
And then add this rule below the .productContainer .productBox rule in the stylesheet:
.produtContainer .last {
margin-right: 0;
}
.productContainter div:last-child
You can do :first-child or :last child to target the first and last element.
compatibility: http://www.quirksmode.org/css/contents.html
You can use :last-child selector for the rule
.productContainer div:last-child
{
// rule
}
http://www.quirksmode.org/css/firstchild.html
You can use the last-child pseudo-selector in this case...
.productContainer > .productBox:last-child {
margin-right: 0;
}
Note: This will not work in IE8 and older, as this is a part of CSS3. For something more portable, you might want to try this...
<div class="productBox last"></div>
.productContainer > .productBox.last {
margin-right: 0;
}