This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 8 years ago.
CSS3 selectors can get pretty in-depth and I'm having a problem that chaining a couple together using SASS.
CODE
SASS:
$greymd: #a7aaac;
$blue: #405daa;
$orange: #cabc18;
#C05 {
.tab:nth-child(2) {
.num:nth-child(1) {
position: absolute;
top:200px;
left:800px;
color:$greymd;
}
.num:nth-child(2) {
position: absolute;
top:300px;
left:800px;
color:$blue;
}
.num:nth-child(3) {
position: absolute;
top:400px;
left:800px;
color:$orange;
}
}
}
HTML:
<body id="C05">
<div class="tab-wrapper">
<div class="tab active" data-slide="1">
<div class="chart-wrapper">
<div class="chart">
<div class="overflow">
<div class="arrow"></div>
<div class="lines"></div>
<div class="num">1</div>
<div class="num">2</div>
<div class="num">3</div>
</div>
</div>
</div>
</div>
<div class="tab" data-slide="2">
<div class="chart-wrapper">
<div class="chart">
<div class="overflow">
<div class="arrow"></div>
<div class="lines"></div>
<div class="num">10</div>
<div class="num">20</div>
<div class="num">30</div>
</div>
</div>
</div>
</div>
<div class="tab" data-slide="3">
<div class="chart-wrapper">
<div class="chart">
<div class="overflow">
<div class="arrow"></div>
<div class="lines"></div>
<div class="num">100</div>
<div class="num">200</div>
<div class="num">300</div>
</div>
</div>
</div>
</div>
</div><!--/.tab-wrapper-->
</body>
The thing is, if I removed <div class='arrow'></div> and <div class='lines'></div> it works as expected. Clearly there's something about nth selectors that I don't know.
The error is indeed with your expected use of nth-child. Take the following CSS code:
.num:nth-child(1)
This code looks for a class .num that is the first child of its parent element. However, the first .num in your code is the third child of its parent element.
Related
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 2 years ago.
I have the following markup:
.shwonlyclick {
display: none;
}
.asd>.delfirstdiv:first-child>.shwonlyclick:first-child {
display: block;
}
<div class="asd">
<div>title</div>
<div>sub title</div>
<div class="delfirstdiv">
<p class="shwonlyclick">Show this</p>
</div>
<div class="delfirstdiv">
<p class="shwonlyclick">Hide</p>
</div>
<div class="delfirstdiv">
<p class="shwonlyclick">Hide</p>
</div>
</div>
all tags are hidden, I only want the first one show. How?
Move your title and sub-title outside the parent div and fix your typo in your selector and it will work:
first-child is the first element inside it's parent (not the first element with a class name)
.shwonlyclick {
display: none;
}
.asd>.delfirstdiv:first-child>.shwonlyclick:first-child {
display:block;
}
<div>title</div>
<div>sub title</div>
<div class="asd">
<div class="delfirstdiv">
<p class="shwonlyclick">Show this</p>
</div>
<div class="delfirstdiv">
<p class="shwonlyclick">Hide</p>
</div>
<div class="delfirstdiv">
<p class="shwonlyclick">Hide</p>
</div>
</div>
if you are unable to change the html layout, then you can use the adjacent sibling combinator to hide any divs that follow another (which will mean the first is shown):
.delfirstdiv+.delfirstdiv .shwonlyclick {
display: none;
}
<div class="asd">
<div>title</div>
<div>sub title</div>
<div class="delfirstdiv">
<p class="shwonlyclick">Show this</p>
</div>
<div class="delfirstdiv">
<p class="shwonlyclick">Hide</p>
</div>
<div class="delfirstdiv">
<p class="shwonlyclick">Hide</p>
</div>
</div>
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 3 years ago.
I was trying to do swim lanes but it doesnt work when using float. According to w3schools it should work regardless of type.
Here's my fiddle
And the code from above fiddle, html...
<div>
<div class="table-row">
<div class="float">1</div>
<div class="float">2</div>
<div class="float">3</div>
</div>
<div class="table-row">
<div class="float">1</div>
<div class="float">2</div>
<div class="float">3</div>
</div>
<div class="table-row">
<div class="float">1</div>
<div class="float">2</div>
<div class="float">3</div>
</div>
</div>
<br/>
<br/>
<div>
<div class="table-row">
<div class="table-cell">1</div>
<div class="table-cell">2</div>
<div class="table-cell">3</div>
</div>
<div class="table-row">
<div class="table-cell">1</div>
<div class="table-cell">2</div>
<div class="table-cell">3</div>
</div>
<div class="table-row">
<div class="table-cell">1</div>
<div class="table-cell">2</div>
<div class="table-cell">3</div>
</div>
</div>
css...
.table-row {
clear: both;
}
.table-row:nth-child(odd) {
background-color: rgb(200,203,207);
}
.float {
float: left;
}
.table-cell {
display: table-cell;
}
EDIT:
I've tried, in the fiddle, the overflow auto and clear fix classes as per the "This question already has an answer" answers. None of them work.
As you can see, there are .row elements that are parent to .cell elements.
I have a selected element inside a .row element, I want to target:
An element that is a child of the parent element that follows the parent containing .selected
Is this possible in CSS only?
Assume I want to select the second .cell of the parent next to the parent containing .selected
How do I turn the background color of the div containing the number 13 green?
.row .cell.selected {
background-color: red
}
.row .cell.selected+.cell+.cell {
background-color: red;
}
.row .cell.selected+.cell+.cell+.cell {
background-color: red;
}
.row .cell.selected+.cell+.cell+.cell+.cell+.cell {
background-color: red;
}
#month-view .row .cell.selected+.cell {
background-color: yellow;
}
.row {
padding: 50px;
}
<div id="month-view">
<div class="row">
<div class="cell">
<div class="day"> <span>5</span></div>
</div>
<div class="cell selected">
<div class="day"><span>6</span></div>
</div>
<div class="cell">
<div class="day"><span>7</span></div>
</div>
<div class="cell">
<div class="day"><span>8</span></div>
</div>
<div class="cell">
<div class="day"><span>9</span></div>
</div>
<div class="cell">
<div class="day"><span>10</span></div>
</div>
<div class="cell">
<div class="day"><span>11</span></div>
</div>
</div>
<div class="row">
<div class="cell ">
<div class="day"><span>12</span></div>
</div>
<div class="cell">
<div class="day"><span>13</span></div>
</div>
<div class="cell">
<div class="day"><span>14</span></div>
</div>
<div class="cell">
<div class="day"><span>15</span></div>
</div>
<div class="cell">
<div class="day"><span>16</span></div>
</div>
<div class="cell">
<div class="day"><span>17</span></div>
</div>
<div class="cell">
<div class="day"><span>18</span></div>
</div>
</div>
/div>
If I understood your question you want that the cell that gets a ".selected" class in the first row gets a styling in a cell in the same position in the second row.
That is not possible with CSS only, just using JS. CSS can't give you the index position of your ".selected" cell.
If you want a solution that is pure HTML and CSS I recommend you to add a second class like ".selected-column" to the next rows and style after this.
Not possible in CSS as you can't go backwards/up the DOM in CSS. But in case you can use JS or jQuery, here's a way. It's pretty easy and intuitive with jQuery using $.parent(), $.next(), and :nth-child.
$('.selected').parent('.row').next('.row').find('.cell:nth-child(2)').addClass('green');
.row .cell.selected {
background-color: red
}
.row {
padding: 50px;
}
.green {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="month-view">
<div class="row">
<div class="cell">
<div class="day"> <span>5</span></div>
</div>
<div class="cell selected">
<div class="day"><span>6</span></div>
</div>
<div class="cell">
<div class="day"><span>7</span></div>
</div>
<div class="cell">
<div class="day"><span>8</span></div>
</div>
<div class="cell">
<div class="day"><span>9</span></div>
</div>
<div class="cell">
<div class="day"><span>10</span></div>
</div>
<div class="cell">
<div class="day"><span>11</span></div>
</div>
</div>
<div class="row">
<div class="cell ">
<div class="day"><span>12</span></div>
</div>
<div class="cell">
<div class="day"><span>13</span></div>
</div>
<div class="cell">
<div class="day"><span>14</span></div>
</div>
<div class="cell">
<div class="day"><span>15</span></div>
</div>
<div class="cell">
<div class="day"><span>16</span></div>
</div>
<div class="cell">
<div class="day"><span>17</span></div>
</div>
<div class="cell">
<div class="day"><span>18</span></div>
</div>
</div>
</div>
I am obviously missing something really fundamental but I have the following html
<div class="test-cont">
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">TEST2</div>
</div>
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">HELLO WORLD</div>
</div>
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">TEST2</div>
</div>
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">HELLO WORLD</div>
</div>
</div>
and am using the following selectors
.test-cont .row:nth-of-type(odd) {
background: purple;
}
.test-cont .row:nth-of-type(even) {
background: red;
}
Which I believe expresses 'select the nth child items of .text-cont where class contains .row and is either odd or even'.
Yet the <div class="md-margin"></div> break these selectors.
So I end up with
Instead of the alternating pattern I expect. The problem is resolved when I remove the md-margin divs. What am I missing?
it is because you have those md-margin divs in between, making them the even ones.
(althought :nth-of-type will show the result you want when using classes - depending on the markup -, but it refers to the element type, that's why div with md-margin are "counting" here.
snippet with md-margin
.test-cont .row:nth-of-type(4n+2) {
background: purple;
}
.test-cont .row:nth-of-type(4n+4) {
background: red;
}
<div class="test-cont">
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">TEST2</div>
</div>
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">HELLO WORLD</div>
</div>
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">TEST2</div>
</div>
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">HELLO WORLD</div>
</div>
</div>
Snippet without md-margin
.test-cont .row:nth-of-type(odd) {
background: purple;
}
.test-cont .row:nth-of-type(even) {
background: red;
}
<div class="test-cont">
<div class="row">
<div class="col-md-12">TEST2</div>
</div>
<div class="row">
<div class="col-md-12">HELLO WORLD</div>
</div>
<div class="row">
<div class="col-md-12">TEST2</div>
</div>
<div class="row">
<div class="col-md-12">HELLO WORLD</div>
</div>
</div>
Would it be possible to achieve the attached grid in bootstrap? Each of the squares would probably be an image... or perhaps text!
I've had a go, but hit a wall when it comes to the top-left box for example that spans over two rows.
Grid:
Use nested blocks whenever you need your grid to span several rows.
Something like this:
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
<div class="row">
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
</div>
<div class="col-sm-8">
<div class="row">
<div class="col-sm-8"></div>
<div class="col-sm-4"></div>
</div>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-8"></div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
Then you can set the height for your blocks and your grid is good to go.
A newbie here.
So I was learning to make nested grids when I stumble on this question.
My Rules for making nested grids:
1.The entire grid will be in parent container .row (parent wrapper)
2.Columns are always nested in columns, however all nested columns must have a .row(column wrapper) wrapper to align items horizontally e.g.:
<div class='col-md-12'>
<div class='row'>This is the column wrapper.
<div class='col-md-9'></div>
<div class='col-md-3'></div>
</div>
</div>
3.Breakpoints are very key
4.You may have to use custom css to fine tune your grid.
This is my solution to the problem:
<div class='row parent-wrap'>
<div class='col-sm-6 big-left'>Top Left big</div>
<div class='col-sm-6 quarter-grid'>
<div class='row top-wrap'>
<div class='col-sm-6 top-left'>top-left</div>
<div class='col-sm-6 top-right'>top-right</div>
<div class='col-sm-6 bottom-left'>bottom-left</div>
<div class='col-sm-6 bottom-right'>bottom-right</div>
</div>
</div>
<div class='col-sm-12'>
<div class='row mid-wrap'>
<div class='col-sm-3 mid-start'>mid-start</div>
<div class='col-sm-6 mid-center'>mid-center</div>
<div class='col-sm-3 mid-end'>mid-end</div>
</div>
<div class='col-sm-9'>
<div class='row bottom-wrap'>
<div class='col-sm-8 bottom-start'>bottom-start</div>
<div class='col-sm-4 bottom-center'>bottom-center</div>
</div>
</div>
</div>
Rudimentary custom css:
.parent-wrap{
margin:100px;
}
.big-left{
background-color: aqua;
height:300px;
}
.top-left{
background-color:black;
height:150px;
}
.top-right{
background-color: blue;
height:150px;
}
.bottom-left{
background-color:brown;
height:150px;
}
.bottom-right{
background-color:crimson;
height:150;
}
.mid-start{
background-color:grey;
height:200px;
}
.mid-center{
background-color: red;
height:200px;
}
.mid-end{
background-color: pink;
height:400px;
}
.bottom-start{
background-color:blueviolet;
margin-left:-15px;
height:200px;
margin-top:-200px;
}
.bottom-center{
background-color:burlywood;
height:200px;
margin-top:-200px;
}