This question already has answers here:
What does the "+" (plus sign) CSS selector mean?
(9 answers)
Is there a "previous sibling" selector?
(30 answers)
Closed 3 months ago.
How could I use the :has selector to style a sibling?
In this example, the logic is:
If the parent has a child with the class child1, child2 should be green.
but I can't seem to get it working- nor any :has selector for that matter, but sources online give conflicting syntaxs. I'm confused by it.
.parent {
height: 100px;
width: 200px;
font-size: 10px;
}
.child1, .child2 {
width: 100px;
height: 50px;
background-color: red;
border: 2px solid black;
}
.child1 {
background-color: green
}
.parent:has(.child1) > .child2 {
background-color: green;
}
<div class="parent">
<div class="child1">
this is child1
</div>
<div class="child2">
this is child2
</div>
</div>
Related
This question already has answers here:
Make absolute positioned div expand parent div height
(15 answers)
Closed last month.
How to expand the parent to have the same height as the child (the content) when the child has position: absolute ?
The height of the child is not static
Solution without javascript
.parent {
position: relative;
background: red;
}
.child {
position: absolute;
right: 10px;
width: 100px;
background: blue;
}
<div class="parent">
<div class="child">
test<br>test<br>test<br>test
</div>
</div>
<div>
some text below parent
</div>
(JsFiddle)
.parent {
position: relative;
background: red;
width: max-content;
}
on the parent
This question already has answers here:
floating elements behavior
(2 answers)
floating elements are outside of containing blocks?
(2 answers)
Closed 5 months ago.
HTML
<body>
<div class="parent">
<div class="red">1</div>
<div class="green">2</div>
</div>
</body>
Styles
.red {
width: 150px;
height: 150px;
background-color: red;
}
.green {
width: 150px;
height: 150px;
background-color: green;
}
.parent {
background-color: yellow;
}
Output
When I add float left to red class, I am getting the below output.
May I know why the content of green div is overflowing outside of the parent div when I float the red div?
This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Closed 2 years ago.
I have a parent div with two child divs. The 2nd child is set to flex-grow. This works great, unless text has wrapped within the first column. In this case, it leaves a big empty space. Why is that, and can it be fixed?
This is the result I would Expect:
This is what is actually happening:
body {
font-family: sans-serif;
}
.parent {
display: flex;
max-width: 225px;
border: 1px solid green;
padding: 3px;
}
.parent > div {
border: 1px solid red;
pading: 3px;
padding: 2px;
}
.child2 {
flex-grow: 1;
display: flex;
align-items: center;
}
<div class="parent">
<div class="child1">
Short
</div>
<div class="child2">
+
</div>
</div>
<div class="parent">
<div class="child1">
Long NamedItem Thingamagig AnotherBigLong WordHere1234
</div>
<div class="child2">
+
</div>
</div>
<br>
Why is this space here ↑
Because you have a long string.
Add word-break: break-all to .parent > div and you'll understand what is happening.
You'll want to tweak .child1 with :
flex-grow: 0;
flex-shrink: 0;
flex-basis: 0;
or maybe
flex-grow: 0;
flex-shrink: 0;
flex-basis: 80%;
(I put this syntax because it works better with IE)
How to define a CSS selector that targets only the highest level element of itself, but not those elements that are nested within the same selector itself?
For example the style rules gets applied to .card element, but not .card .card or .card .card .card elements... ?
You can negate the styling of the children with the Descendant combinator
.card {
border: 1px solid black; /* orig style */
height: 200px;
width: 50%;
}
.card {
border: 5px solid red; /* "highest level element of itself" */
}
.card .card {
border: 1px solid black; /* children of the "highest level element" */
}
<body>
<div class="card">
<div class="card">
<div class="card"></div>
</div>
</div>
</body>
This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
How to get a child element to show behind (lower z-index) than its parent? [duplicate]
(7 answers)
Closed 3 years ago.
The Green span text should be over the blue box.
I don't know why it is not working, even z-index for Green span is higher than the blue box.
.green, .blue {
position: absolute;
width: 100px;
color: white;
line-height: 100px;
height: 100px;
text-align: center;
}
.green {
top: 60px;
left: 60px;
background: green;
z-index: 1;
}
.green span {
z-index: 3;
}
.blue {
top: 100px;
left: 100px;
background: blue;
z-index: 2;
}
<div class="green">
<span>Green</span>
</div>
<div class="blue">
<span>Blue</span>
</div>
Expected result is below;
How can I make Green span is over the blue box?