CSS Selector for a previus div - css

<div class="main">
<div class="content">
<div class="content_hide">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
<div class="sidebar">
<div class="single_sidebar">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
This is my HTML code. When I hover single_sidebar element, I want style content_hide div. something like
.single_sidebar:hover ##content_hide {background:red}
How can I select content_hide div by CSS when I hover single_sidebar?


Currently there's no way to do so in CSS. Maybe only in CSS4 with !.
You will have to incorporate JavaScript.
Just as an example, in jQuery:
$(".single_sidebar").on("mouseenter mouseleave", function(event) {
$(this).closest(".main").find(".content_hide").toggleClass("someStyleClass");
});

Related

Handling column breaks in multi column layout

Background
I need to make a multi-column layout only for the purpose of printing. So now I'm using Chromium 85 but I can switch to anything else because I only need to provide support for a single browser. I'm also free to use pretty much any CSS/JS library if it may help to solve the issue.
Problem description
I'm trying to implement a very basic multi-column layout. Everything works fine except for the fact that I can not avoid widowed headers. The break-after: avoid instruction does not work for some reason.
Problem Illustration
Code example
<!DOCTYPE html>
<html>
<head>
<style>
.columns {
height: 300px;
column-fill: auto;
column-width: 150px;
}
h1 {
break-after: avoid;
}
</style>
</head>
<body>
<div class="columns">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</body>
</html>
Questions
Why is it not working as expected?
Am I doing something wrong according to the W3C specs or is it a lack of browser support?
Are there any ways/tools to work this around?

Make 3 Responsive Columns?

I want to make a responsive grid of columns just like in this picture. That's what I want it to look like in desktop mode.
In the mobile mode, I want it to shrink and stack on top of each other when I resize the browser.
How do I do this?
Here's my code:
.help-icons {
height: 10rem;
width: 10rem;
}
.icon-one,
.icon-two,
.icon-three,
.icon-four,
.icon-five,
.icon-six {
border: 1px solid $color-silver;
}
.dark-text {
font-size: 0.7rem;
}
.light-text {
color: $color-boulder;
font-size: 0.5rem;
}
.help-icons
.icon-one
span.wfs-pie-chart
p.dark-text Some Text
p.light-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
.icon-two
span.wfs-user
p.dark-text Some Text
p.light-text Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque.
.icon-three
span.wfs-git-branch
p.dark-text Some Text
p.light-text Mauris nunc congue nisi vitae suscipit tellus mauris a diam.
.icon-four
span.wfs-database
p.dark-text Some Text
p.light-text Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum.
.icon-five
span.wfs-trending-up
p.dark-text Some Text
p.light-text Egestas sed sed risus pretium quam vulputate dignissim suspendisse in.
.icon-six
span.wfs-cloud
p.dark-text Some Text
p.light-text Proin fermentum leo vel orci porta non pulvinar neque laoreet.
Thanks!
EDIT: I have media queries for the mobile, tablet, and desktop already:
//- Mobile
#media screen and (min-width: 15rem){
}
// Tablet
#media (min-width: 768px) {
}
// Desktop
#media (min-width: 1280px) {
}

hope this would be useful.
.help-icons {
width: 100%;
}
.help-icons > div {
width: 10rem;
float: left;
margin-left: 10px;
}
.icon-one,
.icon-two,
.icon-three,
.icon-four,
.icon-five,
.icon-six {
border: 1px solid $color-silver;
}
.dark-text {
font-size: 0.7rem;
}
.light-text {
color: $color-boulder;
font-size: 0.5rem;
}
<div class="help-icons">
<div class="icon-one">
<span class="wfs-pie-chart"></span>
<p class="dark-text"> Some Text</p>
<p class="light-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="icon-two">
<span class="wfs-user"></span>
<p class="dark-text"> Some Text</p>
<p class="light-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="icon-three">
<span class="wfs-git-branch"></span>
<p class="dark-text"> Some Text</p>
<p class="light-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="icon-four">
<span class="wfs-database"></span>
<p class="dark-text"> Some Text</p>
<p class="light-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="icon-five">
<span class="wfs-trending-up"></span>
<p class="dark-text"> Some Text</p>
<p class="light-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="icon-six">
<span class="wfs-cloud"></span>
<p class="dark-text"> Some Text</p>
<p class="light-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
</div>

You can make use of Bootstrap's row and column classes. This way it is not necessary for any media queries as Bootstrap does it all for you. Just make sure you have Bootstrap installed in your project, then you can make use of the following code in your html:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="row">
</div>
<div class="row">
</div>
</div>
<div class="col-sm-4">
<div class="row">
</div>
<div class="row">
</div>
</div>
<div class="col-sm-4">
<div class="row">
</div>
<div class="row">
</div>
</div>
</div>
</div>
You can check out Bootstrap's documentation for different screen size breakpoints: https://getbootstrap.com/docs/4.1/layout/grid/. You can also change the width and height of rows and columns to your liking, by targeting the Bootstrap classes or adding custom classes to the Bootstrap classes.

Bootstrap column align to previous item in column

I've tried to resolve this problem for a while so I need your help Stackoverflow..
I have a template with 2 columns (with bootstrap grid system) like that :
http://snag.gy/Vh9Do.jpg
And I would like something like that :
http://snag.gy/cYIlo.jpg
My html looks like that for the moment :
<div class="container-fluid">
<div class="row">
<div class="post-container column-md-6" id="post-1">
content...
</div>
<div class="post-container column-md-6" id="post-2">
content...
</div>
</div>
<div class="row">
<div class="post-container column-md-6" id="post-3">
content...
</div>
<div class="post-container column-md-6" id="post-14">
content...
</div>
</div>
[...]
</div>
Do you have any idea how could I do that ? (without breaking the post order in the page, because their is only one column in portrait orientation)

You wont be able to do that only with html, you need add some JS and for that there is many good plugins (one example: http://www.akshitsethi.me/pinterest-like-grid-layout-using-jquery/)
Another option (if you don`t need IE support - 10% of the users):
CSS3 Collumn. Easy and clean:
Check out this fiddle > http://jsfiddle.net/luckmattos/aExxp/1/ or www.w3schools.com "css3_multiple_columns" or...
HTML
<div>
<div class="item1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
CSS
div {
width:500px;
padding:10px;
background:#ccc;
/* Number of COLS */
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
/* Distance between COLS */
-moz-column-gap:10px; /* Firefox */
-webkit-column-gap:10px; /* Safari and Chrome */
column-gap:10px;
}
.item1 {
background:#f00;
height:100px;
padding: 3px;
margin:10px;
display:inline-block;
}
.item2 {
background:#0f0;
height:150px;
padding: 3px;
margin:10px;
display:inline-block;
}
.item3 {
background:#00f;
height:100px;
padding: 3px;
margin:10px;
display:inline-block;
}

Without a jsfiddle to play around with, as a guess maybe try removing the .row elements, so something like this:
<div class="container-fluid">
<div class="post-container column-md-6" id="post-1">
content...
</div>
<div class="post-container column-md-6" id="post-2">
content...
</div>
<div class="post-container column-md-6" id="post-3">
content...
</div>
<div class="post-container column-md-6" id="post-14">
content...
</div>
[...]
</div>
If that doesn't work (my appologies) then I recommend using Masonry: http://masonry.desandro.com/options.html
Here are a bunch of examples that use Masonary: http://www.webappers.com/2011/12/29/15-great-examples-of-websites-using-jquery-masonry/

Bootstrap Affix conflicting CSS

I want to affix the following code to the top of the page, below the nav so it is always visible.
<div class="col-lg-5 nopadd affix">
<h3>Project One</h3>
<p>Lorem ipsum dolor ...</p>
</div>
However when I add the bootstrap .affix it makes it ignore the col-lg-5 class that has been applied.
Here is the code I have so far.
http://jsfiddle.net/P9d5k/2/
http://jsfiddle.net/P9d5k/2/embedded/result/

try this fiddle
I just add a 100% width div with the affix class and inside a .container with your grid inside
<div class="affix" style="width:100%;z-index:2">
<div class="container">
<div class="col-lg-5">
<h3>Project One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, adipiscing in adipiscing et, interdum nec metus. Mauris ultricies, justo eu convallis placerat, felis enim.</p>
</div>
</div>
</div>

Float issue css in 960 grid

here's what I wan't to create: http://i.imgur.com/9KdL0UW.jpg, here's what I have: http://i.imgur.com/mRDWoRo.jpg. My problem is the layout of news, as you can see, it's not working properly. I'm working with 960 grid and don't know how to reference it in the fiddle, so i posted is as an image instead.
html:
<div class="highlightednews grid_3">
<h4>News Preview</h4>
<h2>Under The Dome: “Big Jim is just too fat, we have to fire him!”</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor pellentesque.</p>
</div>
<div class="highlightednews grid_3">
<h4>News Preview</h4>
<h2>Under The Dome: “Big Jim is just too fat, we have to fire him!”</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor pellentesque.</p>
</div>
<div class="highlightednews grid_3">
<h4>News Preview</h4>
<h2>Under The Dome: “Big Jim is just too fat, we have to fire him!”</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor pellentesque.</p>
</div>
<!--FEATURED NEWS-->
<div class="featurednews grid_3 ">
<h3>How am I gonna be an optimist about this? </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
<p>posted 15th November </p>
</div>
<div class="featurednews grid_3 ">
<h3>How am I gonna be an optimist about this? </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
<p>posted 15th November </p>
</div>
<div class="featurednews grid_3 ">
<h3>How am I gonna be an optimist about this? </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
<p>posted 15th November </p>
</div>
<div class="featurednews grid_3 ">
<h3>How am I gonna be an optimist about this? </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
<p>posted 15th November </p>
</div>
<div class="featurednews grid_3 ">
<h3>How am I gonna be an optimist about this? </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor. </p>
<p>posted 15th November </p>
</div>
<!--NEWEST-->
<div class="newest grid_9">
<h1>Almost Human starting in one week!</h1>
<p>posted 15th November by Andrew</p>
<p>News Preview</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus suscipit metus non pellentesque. Aliquam erat volutpat. Suspendisse nec posuere erat. Cras in sem sed erat hendrerit tempus ac a sem. Fusce laoreet nulla in dolor feugiat, non adipiscing ante pharetra. Nunc pretium dui quis augue pretium, elementum varius odio interdum. Duis sit amet</p>
<p>Social Buttons</p>
<ul>
<li>255 COMMENTS</li>
<li>READ MORE</li>
</ul>
</div>
<div class="newest grid_9">
<h1>Almost Human starting in one week!</h1>
<p>posted 15th November by Andrew</p>
<p>News Preview</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus suscipit metus non pellentesque. Aliquam erat volutpat. Suspendisse nec posuere erat. Cras in sem sed erat hendrerit tempus ac a sem. Fusce laoreet nulla in dolor feugiat, non adipiscing ante pharetra. Nunc pretium dui quis augue pretium, elementum varius odio interdum. Duis sit amet</p>
<p>Social Buttons</p>
<ul>
<li>255 COMMENTS</li>
<li>READ MORE</li>
</ul>
</div>
<div class="newest grid_9">
<h1>Almost Human starting in one week!</h1>
<p>posted 15th November by Andrew</p>
<p>News Preview</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus suscipit metus non pellentesque. Aliquam erat volutpat. Suspendisse nec posuere erat. Cras in sem sed erat hendrerit tempus ac a sem. Fusce laoreet nulla in dolor feugiat, non adipiscing ante pharetra. Nunc pretium dui quis augue pretium, elementum varius odio interdum. Duis sit amet</p>
<p>Social Buttons</p>
<ul>
<li>255 COMMENTS</li>
<li>READ MORE</li>
</ul>
</div>
css:
.grid_3{
background-color: orange;
margin-bottom:10px;}
.grid_9 {
background-color: pink;}
.highlightednews{
float:left;}
.featurednews{
float:right;
background-color:green;
clear:both;}

Your problem here is to do with how your elements are nested. You need to have two parent divs to hold your content like so
<!-- THIS IS THE LEFT COLUMN -->
<div class="grid_9">
<div class="grid_3">
NEWS ITEM
</div>
<div class="grid_3">
NEWS ITEM
</div>
<div class="grid_3">
NEWS ITEM
</div>
<div class="grid_9">
Full width item
</div>
</div>
<!-- THIS IS THE RIGHT COLUMN -->
<div class="grid_3">
<div>FEATURED NEWS ITEM</div>
<div>FEATURED NEWS ITEM</div>
</div>

Resources