This question already has answers here:
How can I select all elements except those inside divs with particular classes
(2 answers)
Closed 3 years ago.
How can I select all divs inside a div except divs which are nested inside one class?
For example:
#test div :not(.testAgain) div {
background: #f00;
}
<div id="test">
<div>
Some Content
</div>
<div>
Some Content
<div class="testAgain">
<div>Some Content again</div>...<div>Test Content</div>
</div>
</div>
</div>
How can I select all divs inside the #test div except the divs that are inside the .testAgain div, i.e. any CSS that I apply should apply to all divs except the content inside the .testAgain div.
I've tried:
#test div :not(.testAgain) div{
/* some CSS Styling */
}
But this doesn't seem to work. (no jQuery please!)
EDIT: There are actually dozens of nested divs ... and the .testAgain div is somewhat 6-7 levels deep down the main (#test) div.
You can do it with the # (id) selector:
#test div { /* all div's inside the #test */
background: #00f;
}
#testAgain div { /* all div's inside the #testAgain */
background: #f00;
}
<div id="test">
<div>
Some Content
</div>
<div>
Some Content
<div id="testAgain">
<div>Some Content again</div>...<div>Test Content</div>
</div>
</div>
<div>
Some Content
<div>
Some Content
</div>
</div>
<div>
Some Content
<div>Some Content
<div>Some Content</div>
</div>
</div>
</div>
div.test > div
This selects all the direct descendants of div class test.
Related
This question already has answers here:
One flex/grid item sets the size limit for siblings
(6 answers)
How can you set the height of an outer div to always be equal to a particular inner div?
(2 answers)
Closed 3 months ago.
I'd like to have this layout, using only css:
<div id="container">
<div id="base-height">
<pre>
some
items
with dynamic height
</pre>
</div>
<div id="with-scroll">
some other content with vertical scroll, if it is higher than div#base-height
</div>
</div>
div#container should have the same height as div#base-height. div#base-height and div#with-scroll should be displayed side by side. If div#with-scroll is higher than div#base-height, it should have vertical scroll.
<div id="container">
<div id="base-height" class = "same-height">
<pre>
some
items
with dynamic height
</pre>
</div>
<div id="with-scroll" class = "same-height">
some other content with vertical scroll, if it is higher than div#base-height
</div>
</div>
CSS
.same-height {
height: 100px;
width: auto;
border: 1px solid black;
}
#with-scroll {
overflow-y: scroll;
}
fiddle https://jsfiddle.net/8ph4qarL/
This question already has answers here:
How to make nth-child work with nested tags?
(2 answers)
Closed 2 years ago.
I tried hr:last-child but it didn't work. Here's my HTML structure:
<div>
<hr />
</div>
<div>
<hr />
// hide this
</div>
It worked only if I have hr as siblings.
whilst you can target it by targetting the parent divs and using the direct-sibling combinator and then the hr inside it would be far better to either add classes or better yet - change the html. Also I would suggest csss for adding things like border-bottom, rather than hr html elements.
but here goes - target the divs that are siblings - then in the div that is not the first sibling - target the hr and hide it with display:none. still not the way i would do it though.
I have added text and padding in the divs to demonstre the hr is removed in the second option.
EDIT - actually - just thought of a simpler way .... but only if you want to hide them in ALL divs that are not the first one.
.hide-hr div:not(:first-child) hr{display:none};
div {
padding: 5px
}
p {
margin: 0;
}
div + div {
border-top-width:0;
}
.hide-hr {
margin-top: 15px;
}
.hide-hr div + div hr {
display: none;
}
<p> the following shows the hr in the second div</p>
<div class="show-hr">
<div>
<p>div 1</p>
<hr/>
</div>
<div>
<p>div 2</p>
<hr/>
</div>
</div>
<p> the following hides the hr in the second div</p>
<div class="hide-hr">
<div>
<p>div 1</p>
<hr/>
</div>
<div>
<p>div 2</p>
<hr/>
</div>
</div>
You can just select the last div insted, and hide the hr in that
div {
border :solid 1px red;
padding: 10px
}
hr {
background: blue;
}
div + div {
border-top-width:0;
}
section div:last-child hr {
display: none;
}
<section>
<div>
<hr/>
</div>
<div>
<hr/>
</div>
</section>
Use :last--of-type
last-of-type
hr:last-of-type {
css here
}
Basically I have a container set to absolute positioning, for which I CAN'T set a width or height for... so it needs to wrap around the content automatically.
However, inside the absolute div, are 3 divs that are set to "float: left", so that they will stack up next to eachother.
Once I set the parent to be absolute positioned, the 3 inside divs jumps down, and the parent div, doesn't wrap around them.
Is it possible at all? So that I can wrap an absolute div, around 3 floating ones (next to one another)
apply overflow:hidden to parent div
Make sure you are using a clear element following your floats (withing your abs position div)
Here is the Fiddle for it
CSS:
.left{
float:left
}
.clearL{
height:1px;
margin-bottom:-1px;
clear:left;
}
#wrapper
{
padding:5px;
background-color:#e37c00;
}
HTML:
<div id="wrapper">
<div id="divOne" class="left">
<p>Some content goes here...</p>
</div>
<div id="divTwo" class="left">
<p>Some content goes here...</p>
</div>
<div id="divThree" class="left">
<p>Some content goes here...</p>
</div>
<div class="clearL">
</div>
<div/>
This will do the trick:
div.wrapper { /* outer-most div */
... /* other styles */
overflow:auto;
}
I use this often, works great inin all modern browsers.
Cheers
<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
</style>
</head>
<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>
</body>
</html>
Why isnt the background color showing up in between those 2 divs?
When you float elements you should provide the width of the floated elements. Otherwise you may encounter unexpected behaviors accross different browsers.
Check this tutorial, there is good info on floating in css. [link is dead]
Basically, if you provide an overflow:hidden; to the container div and provide width to the floated elements, your problem will be solved.
<div style="overflow: hidden;">
<div style="float:left; width: 300px;">Some text</div>
<div style="float:right; width: 300px;">Some text</div>
</div>
Similarly, you can add another div wherever you want to normalize the flow ike this:
<div>
<div style="float:left; width: 300px;">Some text</div>
<div style="float:right; width: 300px;">Some text</div>
<div style="clear:both;"></div>
<div>This div will be at the same place
as if the previous elements are not floated</div>
</div>
Both will work :)
EDIT
Another method which I use frequently in these days is to float the first element and set a margin-left to the following element. For instance:
<div>
<div style="float: left; width: 300px;">Some text</div>
<div style="margin-left: 300px;">Some text</div>
<div style="clear: both;"></div>
</div>
The advantage of this method is that the following element (the second div in this case) does not need a fixed width. Plus, you may skip the third div (clear: both;). It's optional. I just add it in case that the floated div is longer in height than the second div since if you don't add it the parent div will always get the height of the second div.
Just set the container div to overflow: hidden;.
If you set elements to float they won't be in the normal 'flow' of the document anymore.
div { background: #ccc; overflow: hidden; }
And you didn't even made a freehand circle ;)
A floating element doesn't affect the size of the parent, unless the parent specifically contain the children using the overflow style.
Your outer div has the same background colors as the child divs, but the height of the parent is zero, so you don't see its background.
It's because both the divs are floated so the containing divhas no height. If you were to add a third child div whic wasn't a float, give it a height of 0 and clear:both you should see the background colour appear.
The white space you are showing is a body part and you set the background color to the div but not in the body. That is the reason the body part is empty.
To color the empty part you should add following code:
<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
body{
background-color:#ccc;
}
</style>
</head>
<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>
</body>
</html>
You can change the body background color by changing the background color in body style.
If I try to apply min-width, max-width to a floating div so that it expands to max-width when the right content is hidden does not work.
But, if I use table and 2 tds in it, the left td will expand to 100% if the right td is hidden.
Can I achieve this table effect with floated divs?
I don't think you can do what you are asking, but you can make it look like what you are asking.
Make it into two tds and put a max-width on a div inside the td. Would that work?
This isn't going to work with floats. Luckily we now have more tools at our disposal.
Here are two very simple methods to expand a div to 100% of the available width if a sibling horizontally to it is hidden or removed.
#1 – Using display: flex
Compatibility: Edge and all modern browsers. IE 10 and 11 support the non-standard -ms-flexbox.
The Basic Markup
<div class="container">
<div>
First Column
</div>
<div>
This second column can be hidden or not exist and the first column will take up its space
</div>
</div>
The CSS
The container div is given display: flex.
The containers children are give flex: 1 and they will be assigned equal width, can grow and can shrink.
.container {
width: 500px;
display: flex;
}
.container>div {
flex: 1;
background: #FF6961;
height: 200px;
margin-bottom: 20px;
}
.container>div:nth-child(even) {
background: #006961;
}
<div class="container">
<div>
Content
</div>
<div>
Content
</div>
</div>
<div class="container">
<div>
Content takes up the whole width when other divs are hidden.
</div>
<div style="display: none">
Content
</div>
</div>
<div class="container">
<div>
Content takes up the whole width when there is no other div.
</div>
</div>
Read this guide to flexbox
Read more about flexbox on the MDN
#2 – Using display: table
Compatibility: IE8+ and all modern browsers
The Basic Markup
<div class="container">
<div>
First Column
</div>
<div>
This second column can be hidden or not exist and the first column will take up its space
</div>
</div>
The CSS
The container is given display: table
The containers children are given display: table-cell and will act the same as cells in an HTML table. If a cell is hidden or is removed the other cell will take its space.
.container{
display: table;
width: 600px;
margin: 20px;
}
.container>div {
display: table-cell;
height: 200px;
background: #FF6961;
}
.container>div:nth-child(even) {
background: #006961;
}
<div class="container">
<div>
Content
</div>
<div>
Content
</div>
</div>
<div class="container">
<div>
Content takes up the whole width when other divs are hidden.
</div>
<div style="display: none">
Content
</div>
</div>
<div class="container">
<div>
Content takes up the whole width when there is no other div.
</div>
</div>
<div class="container">
<div>
Content takes up the remaining width if a cell has a fixed width.
</div>
<div style="width: 200px">
Content
</div>
</div>
Read more about CSS tables on the MDN