Hello – I would like to show content in a div based on the content in another div. For example, if sibling1 is empty, I would like to hide sibling2 (in parent1 below). If sibling1 has content, I would like to show sibling2 (parent2 below). I'd prefer to be able to do this with CSS, is this possible? If not, I can work with a simple javascript suggestion as well.
<!---hide sibling2--->
<div class="parent1">
<div class="sibling1"></div>
<div class="sibling2">hide</div>
</div>
<!---show sibling2--->
<div class="parent2">
<div class="sibling1">has content</div>
<div class="sibling2">show</div>
</div>
.parent {
height: 100px;
border: 1px solid;
}
.sibling1 { background: green; }
.sibling2 { background: red; }
.sibling1:empty + .sibling2 { display: none; }
<!---hide sibling2--->
<div class="parent">
<div class="sibling1"></div>
<div class="sibling2">hide</div>
</div>
<!---show sibling2--->
<div class="parent">
<div class="sibling1">has content</div>
<div class="sibling2">show</div>
</div>
Related
Good day,
I use paged.js
I added a top title on every page, but that approach does not work for a footer.
I thought about missing semicolon.
https://jsfiddle.net/aldari/sy3pb7a2/6/
#page {
#top-center {
content: element(repeatable);
}
#bottom-center {
content: element(footerblock);
}
border: 1px solid black;
}
.repeatable {
display: block;
position: running(repeatable);
}
.footerblock {
display: block;
position: running(footerblock);
}
.page1,
.page2,
.page3 {
break-before: page;
}
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<div class="wrapper">
<div class="repeatable">
<div class="">header</div>
</div>
<div class="page1">page 1 content</div>
<div class="page2">page 2 content</div>
<div class="page2">page 3 content</div>
<div class="footerblock">
<div class="">footer</div>
</div>
</div>
I meet the identical report:
Running footer "element(footer)" in paged media appear only in last page
The answer: put footer content before main content like in a header.
The repeating block is extracted from the main flow, but it is not defined for pages until the last one, so it should appear in the begging, before main content.
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<div class="wrapper">
<div class="repeatable">
<div class="">header</div>
</div>
<div class="footerblock">
<div class="">footer</div>
</div>
<div class="page1">page 1 content</div>
<div class="page2">page 2 content</div>
<div class="page2">page 3 content</div>
</div>
I have an example on JSFiddle on how I want to solve my issue with flexbox: I want the left column to fit the width accordingly to the content - break a line if the text is too long. Unfortunately it always takes as little space as possible, which results in breaking the layout.
I have a fiddle below, first you see two blocks with how it looks now, below you see 2 blocks how I want it to look like (I've defined fixed width for visual reasons, but I want it to be dynamically with flexbox, obviously).
I'm pretty sure I can do this easily but I can't see the wood for the trees. Any kind of help is highly appreciated :)
.flex {
display: flex;
background: #333;
max-width: 380px;
}
.first {
flex: 0;
background: #666;
}
.second {
flex: 1;
background: #999;
}
<p>How it looks like with my flexbox approach</p>
<div class="flex">
<div class="first">
Here is my Dynamic Text
</div>
<div class="second">
Next to Text
</div>
</div>
<br />
<div class="flex">
<div class="first">
Here is my Dynamic Text Here is my Dynamic Text
</div>
<div class="second">
Next to Text
</div>
</div>
<hr />
<p>How it should look like</p>
<!-- Ignore all code below, please - everything below is just here for visual reasons -->
<div>
<div style="background: #666; width: 165px; float: left;">Here is my Dynamic Text</div>
<div style="background: #999; float: left;">Next to text</div>
</div>
<div style="clear: both; height: 10px;">
</div>
<div>
<div style="background: #666; width: 302px; float: left;">Here is my Dynamic Text Here is my Dynamic Text</div>
<div style="background: #999;float: left; height: 36px;">Next to text</div>
</div>
Use white-space:nowrap on the second element so it does not collapse.
.flex {
display: flex;
border: 1px solid green;
}
.first {
background: lightblue;
border: 1px solid grey;
}
.second {
white-space: nowrap;
background: lightgreen
}
.narrow {
width: 50%;
<div class="flex">
<div class="first">
Here is my Dynamic Text
</div>
<div class="second">
Next to Text
</div>
</div>
<hr/>
<div class="flex narrow">
<div class="first">
Here is my Dynamic Text Here is my Dynamic Text
</div>
<div class="second">
Next to Text
</div>
</div>
My site uses wordpress and toolset, basically, the below code returns a flexbox that has three items within it. Each of those items background colour needs to be different.
I'm unsure on the approach, but research points to something like using, but localizing it to just the flex box, not site wide. Could I request some direction ideas?
div:nth-child(1) {
background: gray;
}
div:nth-child(2) {
background: red;
}
div:nth-child(3) {
background: cyan;
}
CODE BLOCK
[wpv-layout-start]
[wpv-items-found]
<div class="row flexbox-wrap">
<!-- wpv-loop-start -->
<wpv-loop>
<div class="col-md-4 flexbox-equalise">
<article class="well well-equal">
<h4>[wpv-post-title]</h4>
<p>[wpv-post-excerpt output="raw"]</p>
<p class="lead">[wpv-woo-product-price]</p>
<div class="well-actions">
[wpv-woo-buy-or-select add_to_cart_text="Join now!" class="btn-block"]
</div>
</article>
</div>
</wpv-loop>
<!-- wpv-loop-end -->
</div>
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
CSS
.flexbox-equalise .well { position: relative; padding-bottom: 76px; }
.flexbox-equalise .well .well-actions { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; }
Based on the assumption that the loop creates 3 <div class="col-md-4 flexbox-equalise"> siblings, you can use the nth-child selector like this:
.flexbox-equalise:nth-child(1) { background: red; }
.flexbox-equalise:nth-child(2) { background: yellow; }
.flexbox-equalise:nth-child(3) { background: green; }
This selector will target any element having the class flexbox-equalise and being sibling nr 1-3
You can narrow this down further by e.g. adding .flexbox-wrap class to the selector, like this:
.flexbox-wrap > .flexbox-equalise:nth-child(n) { ... }
This selector will target any element having the class flexbox-equalise, being a child of flexbox-wrap and sibling nr 1-3.
Stack snippet
.flexbox-equalise:nth-child(1) {
background: red;
}
.flexbox-equalise:nth-child(2) {
background: yellow;
}
.flexbox-equalise:nth-child(3) {
background: green;
}
<div class="row flexbox-wrap">
<div class="col-md-4 flexbox-equalise">
<article class="well well-equal">
<h4>[wpv-post-title]</h4>
<p>[wpv-post-excerpt output="raw"]</p>
<p class="lead">[wpv-woo-product-price]</p>
<div class="well-actions">
"Join now!"
</div>
</article>
</div>
<div class="col-md-4 flexbox-equalise">
<article class="well well-equal">
<h4>[wpv-post-title]</h4>
<p>[wpv-post-excerpt output="raw"]</p>
<p class="lead">[wpv-woo-product-price]</p>
<div class="well-actions">
"Join now!"
</div>
</article>
</div>
<div class="col-md-4 flexbox-equalise">
<article class="well well-equal">
<h4>[wpv-post-title]</h4>
<p>[wpv-post-excerpt output="raw"]</p>
<p class="lead">[wpv-woo-product-price]</p>
<div class="well-actions">
"Join now!"
</div>
</article>
</div>
</div>
Is it possible to create a CSS rule that applies to the every element except for the first 8 elements? Ie, the 8th plus elements should have a margin top of 65px.
My below less code applies margins to every odd and even button within a menu. Now I want to add a specific margin to the 8th plus buttons. And then ideally apply a specific margin to the 16th plus buttons and so on.
.foo-menu {
.foo-menu-btn {
float: left;
margin: 1px;
}
// Apply specific margin to every second(even) button
.foo-menu-btn:nth-child(even) {
margin-left: -23px;
margin-top: 46px;
}
// Apply specific margin to every odd button
.foo-menu-btn:nth-child(odd) {
margin-left: -23px;
}
// For every button after the 8th one; apply a specific margin
.foo-menu-btn:nth-child( ??? ) {
margin-top: 65px;
}
}
<div class="foo-menu">
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<!-- Now every foo-menu-btn should have a top margin of 65px -->
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
</div>
Try below code, i think help full to you.
hr {
display: block; float: left;
width: 50px; height: 50px;
border: solid 2px #aaa; margin: 10px;
}
hr:nth-child(n+9):not(:nth-last-child(-n)) {
background-color: #ddd;
}
<div id=t>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
</div>
You can use the native CSS :nth-child pseudo-class to specify a range. According to the case you specified it might look like this:
div.foo-menu div.foo-menu-btn:nth-child(n+8):nth-child(-n+15) {
margin-left: 50px
}
The downside is that you still have to manually define each range.
To select everything other than the first 8 divs you can use .foo-menu-btn:nth-child(n+9). See it applied to your HTML below (I took out the negative margins so that the divs would be visible for this example):
.foo-menu-btn {
float: left;
margin: 1px;
background-color: #ccc;
height: 1rem;
}
.foo-menu-btn:nth-child(even) {
margin-top: 46px;
}
.foo-menu-btn:nth-child(n+9) {
margin-top: 65px;
}
<div class="foo-menu">
<div class="foo-menu-btn">1</div>
<div class="foo-menu-btn">2</div>
<div class="foo-menu-btn">3</div>
<div class="foo-menu-btn">4</div>
<div class="foo-menu-btn">5</div>
<div class="foo-menu-btn">6</div>
<div class="foo-menu-btn">7</div>
<div class="foo-menu-btn">8</div>
<!-- Now every foo-menu-btn should have a top margin of 65px -->
<div class="foo-menu-btn">9</div>
<div class="foo-menu-btn">10</div>
<div class="foo-menu-btn">11</div>
<div class="foo-menu-btn">12</div>
<div class="foo-menu-btn">13</div>
<div class="foo-menu-btn">14</div>
<div class="foo-menu-btn">15</div>
<div class="foo-menu-btn">16</div>
</div>
Use :
.foo-menu .foo-menu-btn:nth-child(n+9){
color: blue;
}
.foo-menu .foo-menu-btn:nth-child(odd){
color: red;
}
.foo-menu .foo-menu-btn:nth-child(even){
color: green;
}
.foo-menu .foo-menu-btn:nth-child(n+9){
color: blue;
}
<div class="foo-menu">
<div class="foo-menu-btn">1</div>
<div class="foo-menu-btn">2</div>
<div class="foo-menu-btn">3</div>
<div class="foo-menu-btn">4</div>
<div class="foo-menu-btn">5</div>
<div class="foo-menu-btn">6</div>
<div class="foo-menu-btn">7</div>
<div class="foo-menu-btn">8</div>
<!-- Now every foo-menu-btn should have a top margin of 65px -->
<div class="foo-menu-btn">9</div>
<div class="foo-menu-btn">10</div>
<div class="foo-menu-btn">11</div>
<div class="foo-menu-btn">12</div>
<div class="foo-menu-btn">13</div>
<div class="foo-menu-btn">14</div>
<div class="foo-menu-btn">15</div>
<div class="foo-menu-btn">16</div>
</div>
I have a nested structure that contains the same elements. To only target the elements within the current set I do something like this:
.set1 > .content > .trigger {
background: red;
}
In real life this selector has much more elements. While it works, if I change the name or depth on one of the elements it will no longer work.
Is there a way to just find the .trigger (in this case) of the current set?
<div class="set set1">
<div class="content">
<div class="trigger"></div>
<div class="set set2">
<div class="content">
<div class="trigger"></div>
</div>
<div>
</div>
<div>
You can apply a style on all triggers inside the current set and then remove the style for the other triggers that comes after the first trigger.
div {
padding: 5px;
border: 1px solid;
}
.set1 .trigger {
background: red;
}
.set1 .trigger ~ .set .trigger {
background: none;
}
<div class="set set1">
<div class="content">
<div class="trigger"></div>
<div class="set set2">
<div class="content">
<div class="trigger"></div>
</div>
</div>
</div>
</div>