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.
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.
I need to select the paragraph before the read more so that I can expand the height to the full height of the paragraph. I don't know how I can select it with the :focus selector
.main {
background: red;
}
button:focus **select the one div** {
background: pink;
}
<div class="main">
<div class="one"><p>This is a paragraph. Extra words, Bla Bla........</P></div>
<button>Read More<button>
</div>
Try it. Sibling combinator works only like this. From top to bottom tag
<html>
<head>
</head>
<body>
<div class="main">
<button>Read More</button>
<div class="one">some</div>
</div>
<style>
.main {
background: red;
}
button:hover + .one {
background: pink;
}
</style>
</body>
</html>
Maybe use the :has() pseudo-class but beware it's currently not supported by all browsers (especially not Firefox)
.main:has(button:focus) .one>p {
height:auto;
}
Fiddle example : https://jsfiddle.net/6me19dLy/
"Can I use" report : https://caniuse.com/css-has
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();
}
I´m trying to do something similar to this: https://stackoverflow.com/a/8539107/1743291
I want to give the first element of a class a different style from the other elements using the same class.
So I created something like this following the workaround from the post above:
.kn-menu > .control.has-addons {
border: 1px solid red;}
.kn-menu > .control.has-addons ~ .control.has-addons {
border: none;}
But this is not working for me.
Can anyone tell me what is wrong with my approuch?
Thanks!
You can use the first-of-type pseudo class:
.test {
width: 200px;
height: 100px;
margin: 10px;
background-color: green;
}
.test:first-of-type{
background-color: red;
}
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
suppose you have three divs within a parent section like this:
<section class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</section>
And on your CSS you have styles for those divs with class name "child":
.parent .child{
border:0;
}
You can give particular properties to the first div like this:
.parent .child:first-child{
border: 1px solid #000000;
}
Or select child what you want:
.parent .child:nth-child(3){
border:1px solid #ffffff;
}
if i understand it correct you just want to difference the first element. I think that solution can be use pseudo class first-of-type
HTML
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
CSS
.item {
color: red;
font-size: 32px;
}
.item:first-of-type {
color: blue
}
https://codepen.io/smil3cz/pen/GRjYyyL
i have html like this:
<div class="container">
<div class="foo">Foo!</div> <!-- if this is red... -->
<div class="bar">Bar!</div>
</div>
<div class="container">
<div class="foo">Foo!</div> <!-- ...i want this blue... -->
<div class="bar">Bar!</div>
</div>
<div class="container">
<div class="foo">Foo!</div> <!-- ...and this red. -->
<div class="bar">Bar!</div>
</div>
and i want every second "foo" to have a blue background, the other foo:s red.
i have tried:
.container .foo:nth-child(odd)
{
background-color: red;
}
.container .foo:nth-child(even)
{
background-color: blue;
}
i have also played some with nht-of-type but i can't get it to work.
In the test above they all are "odd" since all of them get blue.
What am i doing wrong?
You had your nth-child selector in the wrong spot:
.container:nth-child(odd) .foo
{
background-color: red;
}
.container:nth-child(even) .foo
{
background-color: blue;
}
jsFiddle example
Your selectors are a little off.
They should be on the parent.
.container:nth-child(odd) .foo
{
background-color: red;
}
.container:nth-child(even) .foo
{
background-color: blue;
}