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
Related
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();
}
Is there any way in css to select only the container child that is on hover without the parent, is this possible with css?
This is what I'm trying, the deepest container should be selected not the .decor which I added only to show the div that is selected.
(these childs are added dynamically without classes or id's)
This is very simple and I know it can be done easily with javascript but I wanted to know if there is a selector in css.
** jsFiddle **
HTML
<body>
<div class=container>
<div class=decor> </div>
</div>
<div class=container>
<div class=decor></div>
<div class=container>
<div class=decor></div>
</div>
</div>
</body>
CSS
html,body{margin:0;}
*{box-sizing:border-box;}
.container {
position:relative;
width:100%;
min-height:30px;
padding:5%;
border:4px solid blue;
}
.decor{
position:absolute;
top:1%;
right:1%;
height:10px;
width:10px;
padding:0;
background-color:green;
}
.container:hover > .decor {
background-color:red;
}
In your case I think the :only-child selector might work. Though I'm confused by the .decor elements...
Something like:
div:hover .decor:only-child {
background-color:red;
}
Here's the full jsFiddle.
I thought :first-of-type will effect the first-of-type which in my case is
<div class="box">I am the first box in div.center...</div>
If I remove the <div class="top"> the CSS works and adds the green-top-border.
But I need <div class="top">, so why is it not working if <div class="top"> is there?
FIDDLE
<div class="main-wrap">
<div class="center">
<h3>Lorem Ipsum</h3>
<div class="top">XXX XXX XXXX</div>
<div class="box">I am the first box in div.center. Why no top border?</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
.box {
width:100%;
height:30px;
margin:10px 0;
background-color:orange;
}
.main-wrap .center div.box:first-of-type {
border-top:4px solid green;
}
.box {
position:relative;
border-bottom:4px solid green;
}
When you have div.top there, that becomes the first div element within its parent. :first-of-type only looks at the type of element; div.box:first-of-type really means select div:first-of-type only when it has the class .box, and not the first div.box.
To reach the first div.box, use an adjacent sibling selector:
.main-wrap .center div.top + div.box {
border-top:4px solid green;
}
The CSS declaration is over-qualified. If this design pattern repeats through out the site then using the following sibling selector is just as good and cleaner:
.top + .box {
border-top: 4px solid green;
}
The browser looks at the declaration from right to left, so will scan for all the .box classes and then scan for the .box classes that are associated .top. By adding the additional classes, the browser is forced to re-scan 2 more times before applying the declaration styles.
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.
Let say I got this page:
<body>
<h1>Hello!</h1>
<div class="wrapper">
<div class="anotherclass">
<h1>Another heading 1</h1>
</div>
<div class="yetanotherclass">
<h1>Yet another heading 1</h1>
</div>
</div>
<h1>Good bye!</h1>
<div class="class">
<h1>Good bye. And this time I mean it.</h1>
</div>
</body>
And I want to select all H1 elements that are NOT within the wrapper-class. How can I do that with CSS?
I don't want a "solution" like
body h1, body .class h1 {style definitions}
I'm more after some kind of this:
h1:not(.wrapper > h1) {style definitions}
Is there any way to do this?
What if you did something like this:
h1 { /* rules for everything without the class */ }
h1.class { /* rules for everything with the class */ }
In h1.class you would override everything that you defined in your h1 rule.
Here is an example:
<html>
<head>
<style type="text/css">
div { color:#00f; }
div.foo { color:#f00; }
</style>
</head>
<body>
<div class="foo">foo</div>
<div>bar</div>
<div>baz</div>
</body>
</html>
In this example I have effectively targeted all divs that do not have a class of foo.
You can't do what you're asking with css. The whole idea around css is the cascade, and what you're wanting to do is work against the flow of the cascade.
Work with the tide do regular css:
h1 {style definitions}
.wrapper h1 {style definitions}
You can use the universal selector * to apply global styling and then apply a nested universal selector: .wrapper * to undo the styling you applied originally
* {font-weight:bold; border:thin solid red;}
.wrapper * {font-weight:normal; border: 0px solid white;}