I have a series of elements with the following html format:
<div class="wrap">
<div class="hoverArea"> ... </div>
<div class="caption"> ... </div>
<div class="image"> ... </div>
</div>
with .hoverArea, .caption, .image { position: absolute; }
When user hovers over the 'hoverArea' the (sibling) image enlarges with:
.hoverArea:hover ~ .image { width: 300px; }
This worked fine, but I now need to put the image in a parent/wrapper
<div class="wrap">
<div class="hoverArea"> ... </div>
<div class="caption"> ... </div>
<div class="parent">
<div class="image"> ... </div>
</div>
</div>
What is the selector I need for the nephew?
I thought it was just:
.hoverArea:hover .image { width: 300px; }
Or
.wrap.hoverArea:hover .parent.image { ... }
But these doesnt seem to work.
And would it be any different if I was to add the parent with a '::before'?
try this
~ : for sibling selector
> : for child selector
In Sentence, .hoverArea's sibling is .parent and it's child is .image
.hoverArea:hover ~ .parent > .image{
width: 300px;
}
Related
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>
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>
In CSS, I select "first-child". I want only <div class="b">1</div> on red background. I don't understand
div {
height: 50px;
margin-bottom: 10px
}
.a .b:first-child {
background: red
}
<div class="a">
<div class="b">1</div>
<div class="c">
<div class="b">2</div>
<div class="b">3</div>
<div class="b">4</div>
</div>
</div>
.a .b:first-child means any .b:first-child that is a descendant of .a. Space is the descendant combinator; it doesn't link :first-child to .a in any way.
You want a direct child of .a, using the child combinator: .a > .b.
I think you want your first-child pseudo-class on .a, not .b.
div {
height: 50px;
margin-bottom: 10px
}
.a:first-child {
background: red
}
<div class="a">
<div class="b">1</div>
<div class="c">
<div class="b">2</div>
<div class="b">3</div>
<div class="b">4</div>
</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>
I am attempting to make a simple calendar using css.
I have a parent div that will contain the calendar, and I have a div within that that contains the header with "Monday", "Tuesday", etc and is of fixed height. I now want to add divs that represent the rows of the calendar and split the remaining space into six even rows. However, I can't figure out how to divide the REMAINING space into 6 parts. Everything I try makes the div 1/6th of the parent div.
Any tips would be appreciated.
HTML:
<div id="parent>
<div id="header">
ST
</div>
<div class="row">
hi
</div>
</div>
CSS:
.row{
width:100%;
height: 16.66%;
background-color:red;
}
When you want to distribute remaining space left by a flexible element, flexbox is the answer.
html, body, #parent {
margin: 0;
height: 100%;
}
#parent {
display: flex;
flex-direction: column;
}
#header {
background-color: green;
}
.row {
width: 100%;
flex: 1; /* Distribute remaining space equally among the rows */
background-color: red;
}
.row:nth-child(odd) {
background-color: blue;
}
<div id="parent">
<div id="header">Header</div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
There are several ways to do that, and to pick one I need to know more how it should be used.
This sample simply use CSS calc() and subtract 1/6 of the header from 1/6 of the parent.
html, body {
margin: 0;
}
#parent {
height: 100vh;
}
#header {
height: 60px;
background-color:green;
}
.row{
height: calc(16.66% - 10px);
background-color:red;
}
.row:nth-child(odd){
background-color:blue;
}
<div id="parent">
<div id="header">
Header
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
<div class="row">
</div>
</div>