This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 1 year ago.
<style>
#b2-Column1 {
background-color:red;
min-height:120px;
}
#b2-Column1 > div {
background-color:yellow;
min-height:100px;
}
</style>
<div id="b2-Column1">
<div><!-- some comments here's --></div>
</div>
How can I do, if the yellow section is empty, then I want to both red and yellow setting to display:none;
The best you can do is to hide the yellow part with :empty pseudo-class, however, as we don't have a parent selector, you will have to look for JavaScript solution for the red part.
.container {
background-color: red;
min-height: 120px;
margin-top: 1em;
}
.child {
background-color: yellow;
min-height: 100px;
}
.child:empty {
display: none;
}
<div class="container">
<div class="child"><!-- some comments here's --></div>
</div>
<div class="container">
<div class="child">
<p></p>
</div>
</div>
If you want to do from Jquery then apply this:-
if($("#b2-Column1 > div").text() != ''){
console.log('Not Emtpy');
}
else{
console.log('Empty');
$("#b2-Column1 > div,#b2-Column1").hide();
}
Related
I am loading global CSS styles but I need them to not affect one part of the page and all of its subcomponents. There are some old information but is there a solution now when :not() is a Level 4 selector?
Codepen example that is not working: https://codepen.io/LaCertosus/pen/PoaYeRj
I have a HTML structure that is not predefined, I do not know how many and what elements are around and inside the "red" element.
Visual example
<div class="parent">
<div class="_filler">
<div class="_filler">
<div class="block">
Should be red
</div>
</div>
</div>
<div>
<div class="child-lime">
<div class="block">
Should be lime
</div>
<div class="_filler">
<div class="block">
Should be lime
</div>
</div>
</div>
</div>
</div>
.parent:not(.child-lime) {
.block {
background: red;
}
}
/* Block is an example, in reality we don't know the class name */
.block {
height: 100px;
width: 100px;
background: lime;
border: 1px solid #000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
I have tried different combinations with :not() selector but with no luck. It works when I don't need to include all children.
add this into CSS file
.parent > ._filler .block {
background: red;
}
.child-lime .block {
background: lime;
}
remove this from CSS file
.parent:not(.child-lime) {
.block {
background: red;
}
}
Your question seems to be missing some details, but here's what gets you close (assuming you can't touch the underlying HTML)
.parent {
div:not(.child-lime .block) {
background: red;
}
.block {...}
}
There's an un-classed div element that turns red...but since your comments seem to require not touching the underlying HTML and using the :not pseudo, that's probably as close as you can get.
This is what I have :
Less :
.parent{
&-caption{
color:red;
}
&:first-child{
border: solid blue !important;
&-caption{
color:blue !important;
}
}
}
Html
<div class="parent">
<div class="parent-caption">One</div>
</div>
<div class="parent">
<div class="parent-caption">Two</div>
</div>
<div class="parent">
<div class="parent-caption">Three</div>
</div>
Problem : But the first child's caption's color does not become blue.
Is this possible in LEss ? I know it's possible in Sass.
Thanks
Your less compiles to the following css:
.parent-caption {
color: red;
}
.parent:first-child {
border: solid blue !important;
}
.parent:first-child-caption {
color: blue !important;
}
As you can see, that isn't really valid css. There is a playground on the less css site that allows you to preview how your css code is compiled.
I would recommend you just do something like this
.parent .parent-caption {
color: red;
}
.parent:first-of-type .parent-caption {
color: blue;
}
<div class="parent">
<div class="parent-caption">One</div>
</div>
<div class="parent">
<div class="parent-caption">Two</div>
</div>
<div class="parent">
<div class="parent-caption">Three</div>
</div>
You can do this in Less like so:
.parent {
&-caption {
color: red;
}
&:first-of-type &-caption{
color: blue;
}
}
The explanation for this feature is on the features page of Less css under the Parent Selectors heading.
This question already has answers here:
Pure css Chessboard with div & no classes or ids, is it possible?
(15 answers)
Closed 4 years ago.
I have multiple elements displaying floated left to create rows of 4 elements. I have made them alternate background colour:
div > div { float:left; width:25%; height:50px; background-color:black; }
div > div:nth-child(2n) { background-color:white; }
<div>
<div id="el1"></div>
<div id="el2"></div>
<div id="el3"></div>
<div id="el4"></div>
<div id="el5"></div>
<div id="el6"></div>
<div id="el7"></div>
<div id="el8"></div>
<div id="el9"></div>
<div id="el10"></div>
<div id="el11"></div>
<div id="el12"></div>
</div>
However, what I really need is to alternate between black-white-black-white and white-black-white-black to create a chess board effect. I don't want to alter the HTML if possible. So what I really need is way of alternating an alternate every 4 elements.
Simply move your selector to one before 2n -> 2n-1
.board {
width: 90px;
}
.board div {
width: 30px;
height: 30px;
box-sizing: border-box;
border: 1px solid #ddd;
}
div > div { float:left; width:25%; background-color:black; }
div > div:nth-child(2n-1) { background-color:white; }
<div class="board">
<div id="el1"></div>
<div id="el2"></div>
<div id="el3"></div>
<div id="el4"></div>
<div id="el5"></div>
<div id="el6"></div>
<div id="el7"></div>
<div id="el8"></div>
<div id="el9"></div>
<div id="el10"></div>
<div id="el11"></div>
<div id="el12"></div>
</div>
I am trying to display a div (.mydiv3) when another is hovered, but the div I want to display...
.mydiv1, .mydiv2, .mydiv3 {
display:none;
}
.trigger {
text-align:center;
padding:10px;
color:teal;
}
.trigger:hover{
background:red;
}
<div class="trigger">
Hover Trigger
</div>
<div class="mydiv1">
Text Content 1
</div>
<div class="mydiv2">
Text Content 2
</div>
<div class="mydiv3">
Text Content 3
</div>
Is there a way to do this with CSS or is jQuery my best bet?
You can use ~ in CSS to get the desired result. Check the snippet.
.mydiv1, .mydiv2, .mydiv3 {
display:none;
}
.trigger {
text-align:center;
padding:10px;
color:teal;
}
.trigger:hover{
background:red;
}
.trigger:hover~.mydiv3{
display: block;
}
<div class="trigger">
Hover Trigger
</div>
<div class="mydiv1">
Text Content 1
</div>
<div class="mydiv2">
Text Content 2
</div>
<div class="mydiv3">
Text Content 3
</div>
Edit : With jQuery in case elements are not siblings
$(.trigger).on('mouseenter', function(){
$('.mydiv3').show();
};
$(.trigger).on('mouseleave', function(){
$('.mydiv3').hide();
};
Hope this helps
You can use the general sibling selector for this.
.mydiv1,
.mydiv2,
.mydiv3 {
display: none;
}
.trigger {
text-align: center;
padding: 10px;
color: teal;
}
.trigger:hover {
background: red;
}
.trigger:hover~.mydiv3 {
display: block;
}
<div class="trigger">
Hover Trigger
</div>
<div class="mydiv1">
Text Content 1
</div>
<div class="mydiv2">
Text Content 2
</div>
<div class="mydiv3">
Text Content 3
</div>
With JQuery:
$(".trigger").mouseout(function() {
$(".mydiv3").hide();
})
.mouseover(function() {
$(".mydiv3").show();
});
I have HTML markup like this:
<div id="blocks">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
I would like to style all the .block elements that aren't hovered when I hover on a .block. Is there a way that this can be accomplished with just CSS?
Can I do this with a CSS rule similar to .block:hover .block:not(:hover)?
#blocks:hover {
background-color: blue;
}
.block:hover {
background-color: yellow;
}
See fiddle.
Alternative solution
.block:hover {
background-color: blue;
}
#blocks:hover .block:not(:hover) {
background-color: yellow;
}
See updated fiddle.
#blocks:hover .block {} for all non hovered elements, but a hovering over the whole #blocks element and #blocks .block:hover {} for the hovered element should work.