I'm trying to use the :not selector to get rid of margins from an element that isn't followed by a certain element (.red).
HTML
<section class="image"></section>
<div class="red"></div>
<section class="image"></section>
<section class="image"></section>
<section class="image"></section>
CSS
.image {
background: green;
height: 100px;
width: 100px;
margin-bottom: 30px;
}
.image + div:not(.red) {
margin-bottom: 0;
}
For some reason though, the bottom margins aren't being removed. I've setup a CodePen of it in action over here.
Any help is appreciated. Thanks in advance!
Try using the sibling selector. Here is a JSFiddle
CSS:
div.red ~ .image {
margin-bottom: 0;
}
This will target any .image that is preceded by a div.red. However, a .image that is before a div.red will not be selected.
.image {
background: green;
height: 100px;
width: 100px;
margin-bottom: 30px;
}
.red .image { //this will select the section which are children of red class and have image class
margin-bottom: 0;
}
Related
I got two div's and I want to change the color of the first by hovering the second one. I found solutions when the "hovered " come before the objective that its css should be changed, what if the "hovered" come after? What could be done without javascript?
.box, .box-2 {
display: block;
height: 100px;
width: 100px;
margin: 20px;
}
.box {
background-color: red;
}
.box-2 {
background-color: blue;
}
.box-2:hover + .box {
background-color: green;
}
<body>
<div class="wrapper">
<div class="box"></div>
<div class="box-2"></div>
</div>
</body>
A solution is to inverse the order visually and keep the order in the DOM so that you can still use the + selector.
Here is an example with flex:
.wrapper {
display:flex;
flex-direction:column;
}
.box, .box-2 {
display: block;
height: 100px;
width: 100px;
margin: 20px;
}
.box {
background-color: red;
}
.box-2 {
background-color: blue;
order:2; /* this will make box-2 goes after */
}
.box-2:hover + .box {
background-color: green;
}
<body>
<div class="wrapper">
<div class="box-2"></div>
<div class="box"></div>
</div>
</body>
Some related question to get more ideas:
Is there a "previous sibling" CSS selector?
Previous adjacent sibling selector workaround?
While Temani's answer is a great technique, I have an alternative suggestion if you need this to work both ways, using the :not() selector, though it's a tad bit more hit-or-miss because of your margins.
If you check for the hover on the .wrapper element, you can then style your box when it isn't hovered, like so:
.wrapper:hover > .box:not(:hover) {
background-color: green;
}
I'm trying to learn some basics of HTML by using jfiddle. This is what I've done.
https://jsfiddle.net/Lqn0jch3/
HTML
<body>
<div class="container">
<div class="sidebar">
<div class="logo"></div>
<div class="menu-options">
<p>yeeeeeep</p>
</div>
</div>
</div>
</body>
CSS
html, body {
height: 100%;
overflow-y: hidden;
}
.container {
background-color : #458748;
height: 100%;
}
.sidebar {
height: 100%;
width: 30%;
background-color : #000000;
}
.logo {
background-image: url("https://upload.wikimedia.org/wikipedia/en/thumb/3/31/Britannia_Industries_Logo.svg/1280px-Britannia_Industries_Logo.svg.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 30%;
width: 100%;
text-align: center;
background-color: aqua;
}
.menu-options {
background-color: #FFFFFF;
}
p {
color: #000000;
}
But I can't understand why my 'menu-options' class is not being positioned just below the logo and there's some separation between them.
Thanks in advance.
is this what you want?
https://jsfiddle.net/Lqn0jch3/1/
i changed the css of p
p {
display: inline-block;
color: #000000;
}
the element <p> becomes margins by default, so changing its display or setting margin: 0px; would do the job for you
I've changed your class, modify the positioning to your needs:
.menu-options {
background-color: #FFFFFF;
position:relative;
top:-20px;
}
By default the browser adds margin to the top and bottom of the paragraph element, so to fix this you just have to change the margin to 0.
p {
margin: 0;
}
And you normally wouldn't use a paragraph element in a menu. An Unordered list works well. <ul> <li>
Separation between them is because of default margin style on element p
You can get diffrent default margin values on diffrent browsers, try using CSS Reset scripts.
The goal
Change an element by hovering another with CSS.
The problem
I don't know the syntax. Any ideas?
Code spotlight
I want to change .frame by hovering .app > a. The CSS syntax is spotlighted below:
.app a:hover ->¹ .frame {
background-color: yellow;
}
.frame {
background-color: blue;
width: 300px;
height: 300px;
}
¹ just illustration.
(Also available in jsFiddle)
Try this on for size:
.app:hover ~ .frame {
background-color: yellow;
}
.frame {
background-color: blue;
width: 300px;
height: 300px;
}
Demo: http://jsfiddle.net/maniator/jWA3s/1/
Reference: What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
I have 2 divs side by side. I don't know the height of them upfront, it changed according to the content. Is there a way to make sure they will always be the same height, even when one of them stretches, only with CSS?
I made a fiddle to show. I want the red and blue divs to be the same height...
http://jsfiddle.net/7RVh4/
this is the css:
#wrapper {
width: 300px;
}
#left {
width:50px;
background: blue;
float:left;
height: 100%; /* sadly, this doesn't work... */
}
#right {
width:250px;
background: red;
float:left;
}
You could try instead of using float, use display: table-cell. You might find some older browsers don't understand this rule however. See below:
#wrapper {
display: table; // See FelipeAls comment below
width: 300px;
}
#left {
display: table-cell;
width: 50px;
background: blue;
}
#right {
display: table-cell;
width: 250px;
background: red;
}
Antony answer works ok, but you need all the divs to have the same parent and to have a wrapper, I have a solution that use javascript but works with any kind of element, they just need to have the same selector.
function setEqualHeight(selector, triggerContinusly) {
var elements = $(selector)
elements.css("height", "auto")
var max = Number.NEGATIVE_INFINITY;
$.each(elements, function(index, item) {
if ($(item).height() > max) {
max = $(item).height()
}
})
$(selector).css("height", max + "px")
if (!!triggerContinusly) {
$(document).on("input", selector, function() {
setEqualHeight(selector, false)
})
$(window).resize(function() {
setEqualHeight(selector, false)
})
}
}
setEqualHeight(".sameh", true)
http://jsfiddle.net/83WbS/2/
I would recommend reading this article that explains how to do what you are trying to do. I would put a fiddle up that shows, but its pretty extensive and pure css. http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
There is a much simpler solution I want to point to. Using large padding-bottom: 500em and negative margin-bottom:-500em of the same amount on columns while the wrapper has simply overflow:hidden to cut the columns to the right size.
Found here:
HTML/CSS: Making two floating divs the same height
As indicated by Hexodus you can padding-bottom and margin-bottom, but a better solution would be to use flexbox or grid.
You can check this codepen if you want. I included a footer area because that is something I needed and it required a little bit more of hack.
.section {
width: 500px;
margin: auto;
overflow: hidden;
padding: 0;
}
div {
padding: 1rem;
}
.header {
background: lightblue;
}
.sidebar {
background: lightgreen;
width: calc(25% - 1rem);
}
.sidebar-left {
float: left;
padding-bottom: 500rem;
margin-bottom: -500rem;
}
.main {
background: pink;
width: calc(50% - 4rem);
float: left;
padding-bottom: 500rem;
margin-bottom: -500rem;
}
.sidebar-right {
float: right;
padding-bottom: 500rem;
margin-bottom: -500rem;
}
.footer {
background: black;
color: white;
float: left;
clear: both;
margin-top: 1rem;
width: calc(100% - 2rem);
}
<div class="section">
<div class="header">
This is the header
</div>
<div class="sidebar sidebar-left">
This sidebar could have a menu or something like that. It may not have the same length as the other
</div>
<div class="main">
This is the main area. It should have the same length as the sidebars
</div>
<div class="sidebar sidebar-right">
This is the other sidebar, it could have some ads
</div>
<div class="footer">
Footer area
</div>
</div>
You can do this without using tables, by using this CSS trick.
Example - http://jsfiddle.net/LMGsv/
HTML
<div id="wrapper">
<div id="columns">
<div id="left">text</div>
<div id="right">text<br/>another line<br /></div>
</div>
</div>
CSS
#wrapper {
float:left;
width: 300px;
}
#columns {
float:left;
width:300px;
background:blue;
}
#left {
float:left;
width:50px;
background: blue;
}
#right {
width:250px;
background: red;
float:left
}
<div id="home">
<div id="logo"></div>
<div id="foot">
<div id="one">
<span id="aaa" class="test">aaa</span>
</div>
<div id="two">
<span id="bbb" class="test">bbb</span>
</div>
</div>
</div>
#home {
width: 400px;
height: 400px;
}
#logo {
height: 200px;
background-color: green;
}
#foot {
height: 200px;
}
#one {
height: 200px;
width: 200px;
background-color: red;
}
#two {
height: 200px;
width: 200px;
background-color: blue;
float: left;
}
.test {
margin-top: 50px;
margin-left: 50px;
background-color: yellow;
}
why in this example float: left doesnt working? and why margin-top set position of #home and not of parents?
LIVE: http://jsfiddle.net/tLuTS/10/
Floating doesn't work in your example because you need to float both elements that you want on the same line.
So I've updated your example with #one and #two floated left. Also added some IE float fixes. http://jsfiddle.net/tLuTS/11/
I'm not sure what you're trying to achieve using margin-top.
Both elements need to be floated, and the second one should have clear:both set.
Example
Just add this
#one {
height: 200px;
width: 200px;
background-color: red;
float:left;
}
Here is the updated version on jsfiddle.net.
This is because your inline CSS "test" . For Span Id="bbb", there are two CSS define one is "test" and other is "two". Priority of "test" is more so float is not working .
I'm assuming you want one and two both in the footer. So you have to apply
float: left;
to one as well. About the margins: I can only see margins applied to the text with yellow background. These are <span>s, so inline elements. Make these block level elements, like <p>, for the margin to have effect.