See Example 3 in fiddle below...
https://jsfiddle.net/8opnvq37/1/
HTML
Example 1
<div class="a">A</div>
<div class="b">B</div>
<br /><br />
Example 2
<div class="a">A</div>
<div id="box"><div class="b">B</div></div>
<br /><br />
Example 3
<div id="box2"><div class="a">A</div></div>
<div class="b">B</div>
CSS
.a:hover ~ .b,
.a:hover ~ #box .b
{
background: #3F6;
}
As you can see Example 1 & 2 are working when you hover over A. I know for the hover effect to work, the elements has to be under the same parent— unless you specify it— in Example 2. But how do you get it to work when .a is under a different parent as shown in Example 3??
Does it absolutely need to be hovering on the .a element? I'm not sure it's possible with pure css if so. This would work, though:
#box2:hover ~ .b { background: #3f6; }
Ok I got that to work using javascript
http://jsfiddle.net/6vh5L2t0/
HTML
<div id="c">Div C</div>
---
<div id="box">
<div id="d">Div D</div></div>
Javascipt
$('#d').hover(
function(){
$('#c').css('background', '#F00')
},
function() {
$('#c').css('background', '')
});
Related
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 7 years ago.
I have an accordeon in which is build like this:
<div class="panel">
<div class="panel-heading"></div>
<div class="panel-content collapse/collpase in" aria-expanded="false" ></div>
</div>
CSS build like this:
.panel{
.panel-heading{}
.panel-content{}
}
QUESTION:
when panel-content is collpase/collapse in i need to change my css in the panel-heading .
Is it even possible when they are on the same level?
It's possible to target elements coming after, at the same depth level, but not before. With this HTML (switched elements):
<div class="panel">
<div class="panel-content collapse/collpase in" aria-expanded="false" ></div>
<div class="panel-heading"></div>
</div>
You could have done this:
.panel {
.panel-heading {}
.panel-content {
&.collapse.in + .panel-heading {
// Changes here
}
}
}
A better way to do it (IMO) would be to use your collapse class on the container:
<div class="panel collapsed">
<div class="panel-heading"></div>
<div class="panel-content"></div>
</div>
And the Sass:
.panel {
.panel-heading {}
.panel-content {}
&.collapsed {
.panel-heading {
// Changes here
}
}
}
But I'm perfectly aware this is not always possible, due to framework restrictions.
This is possible, but not in the way you HTML is structured right now. You can target siblings like so:
.bother + .sister {
color: red;
}
This will result in any .sister elements right next to .brother elements to have red text. You can also use ~ instead of + so it's not a close sibling, but instead one that's simply further down the tree, but still a sibling. The problem is, this only works one way. So there's no way for the .panel-content to look back and see if the siblings above it match the selector.
Below is my code. Im using the framework skeleton. I have separate divs that represents three,seven and six columns that equal 16(skeleton is a 16 column framework). Therefore the the 3 divs are all inline accross the screen. The wrapper has a background color grey, therefore making the whole scree grey. However, i want to make the background color of the 3 div classes black. Any ideas? As ive tried to put all 3 divs into another div with an id, and set the background black however did not work?
<div id="wrapper">
<div class="container">
<div class="three columns">
<img src="images/ste.jpg" alt="" height="150px" width="160px" />
<hr />
</div>
<div class="seven columns">
<div id="namechange" class="six columns">
<u><h4>Stephen Carter</h4></u>
<p>I am currently studentying at Leeds Beckett University, and this module is called Advanced Internet Development B </p>
<hr />
</div>
</div>
<div id="navchange" class="six columns">
About
Portfolio
Blog
Contact
<hr />
</div>
</div>
</div>
Add background color to your classes
.three, .seven, .six{
background-color:black;
}
Fiddle with skeleton
Maybe I'm thinking to easy, but how about:
#wrapper {
background: grey;
}
.three, .seven, .six {
background: lightblue;
}
See this JSFiddle.
If it doesn't work for you, please share your CSS.
//try this css code
.three, .seven, .six {
background-color:#000000 !important;
}
Did you try this?
#wrapper .three, #wrapper .seven, #wrapper .six {
background-color:#000000 !important;
}
May be your div#wrapper background color overrides the div#wrapper inside div background color,so add like below:
#wrapper{background:grey;}
#wrapper div{background:black;}
or add !important like below:
#wrapper div{background:black !important;}
You just need to do that :
<div style="background-color: #000000;">
And change the hexadecimal value for the color you want.
Or do that with CSS by usign your classes :
.yourClass {
background-color: #000000;
}
I have the following situation:
<div id="myMenu">
<div id="menu0">stuffs</div>
<div id="menu1">stuffs</div>
<div id="menu2">stuffs</div>
...... and so on
</div>
My requirement is to access all div having id $=menu inside myMenu except menu0, as my menu can have like 10 to 15 item so one way is to do:
#myMenu > menu1 {style}
#myMenu > menu2 {style}
so on... 15 times
but as I have to give same style to all of them , it seems unnecessary , I am looking for CSS selector which will fit correctly for my requirement also having compatible to IE8.
Any help is greatly appreciated.
If you always have the #menu0 element, you can use the general sibling selector that is IE8 compliant:
#menu0 ~ [id^="menu"] {
color: red;
}
<div id="myMenu">
<div id="menu0">stuffs</div>
<div id="menu1">stuffs</div>
<div id="menu2">stuffs</div>
</div>
or use classes (along with ids) that would fit better.
This css3 rule will get the list without #menu0:
div#myMenu > div:not(#menu0)
{
}
Alternately, you can use these two:
div#myMenu > div
{
/*new values*/
}
div#myMenu > div#menu0
{
/*reset with the original values*/
}
This code will hit all the children divs, then the second rule will override the prior one because it is later in the cascade and reset #menu0 to its original condition.
You can use class but also you can:
#myMenu div[id^="menu"]:not(#menu0) {
color: red;
}
<div id="myMenu">
<div id="menu0">stuffs</div>
<div id="menu1">stuffs</div>
<div id="menu2">stuffs</div>
<div id="menu3">stuffs</div>
<div id="menu4">stuffs</div>
<div id="menu5">stuffs</div>
</div>
This one selects all id which start with word 'menu' and is child of element with id #myMenu but exclude element with id #menu0
After comment for older browsers e.g. ie8 you can use:
#myMenu div[id^="menu"] {
color: red;
}
#myMenu #menu0 {
color: #000;
}
<div id="myMenu">
<div id="menu0">stuffs</div>
<div id="menu1">stuffs</div>
<div id="menu2">stuffs</div>
<div id="menu3">stuffs</div>
<div id="menu4">stuffs</div>
<div id="menu5">stuffs</div>
</div>
Because id is unique.
add another class:
<div id="myMenu">
<div id="menu0">stuffs</div>
<div id="menu1" class="sub">stuffs</div>
<div id="menu2" class="sub">stuffs</div>
...... and so on
</div>
and select:
#myMenu > .sub{ ... }
or simplicity
#myMenu .sub{ ... }
If, as implied from the comments to the question, it's always the first child that should not be selected:
/* selects all the <div>s with an id beginning with 'menu',
that follow a <div> with an id beginning with menu, that
are the direct-children of the element with an id of 'myMenu': */
#myMenu > div[id^=menu] + div[id^=menu] {
/* css here */
}
Or:
/* selects all <div> elements that are not the :first-child
that are direct children of <div id="myMenu">: */
#myMenu > div:not(:first-child)
/* css here */
}
Or:
/* selects all <div>s with an id beginning with menu that
have a previous sibling <div> with an id beginning with
'menu' that is the direct child of <div id="myMenu">: */
#myMenu > div[id^=menu] ~ div[id^=menu]
/* css here */
}
I have two divs side by side. When a hyperlink's state is active (when it's clicked), I want to hide the div to the left, using display: none;.
I did this about a year ago, but since this is my first site since then, I can't remember how I did it.
I know it can be done in CSS alone, using :active but just not sure how anymore. How can I do this?
Use the "general sibling" selector ~ in conjunction with a:active
HTML
Click Me
<hr />
<div class="foo"></div>
<div class="bar"></div>
CSS
a:active ~ .foo {
display: none;
}
It basically says: find the div with a class of foo that's a sibling of the active anchor and hide it. Not to be confused with the adjacent sibling selector, +
View the demo here: http://jsfiddle.net/DNy2B/
I am not sure if I understood your question correctly but if it is what I think you asked then do this
<div style="display: none;">
I am learning HTML, so I am kinda new and this might not be what u asked but I wanted to help so yeah :)
This will hide/show the div when the link is clicked.
<html>
<head>
<title>Title</title>
<script src="jq.js"></script>
<script>
$(document).ready(function() {
$("#link").click(function() {
$("#div2").toggle();
});
});
</script>
</head>
<body>
<div id="div1">
div1
<a id="link" href="#">hey</a>
</div>
<div id="div2">
div2
</div>
</body>
</html>
I have 5 div's all with the same class name like this:
CSS:
.test:hover{
color:red;
}
HTML:
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
Imagine for a moment these Div's are in different parent div's on the page...
I'm trying to find a way so they all change to color:red if i hover my mouse over any of the 5 rather than just the one in question changing...
I can't wrap them in a parent and give that parent a hover how ever... they are not sharing the same parents in the first place.
Does CSS provide a way to do this or am I going to have to rest to JavaScript?
One (plain/vanilla) JavaScript approach that works (in compliant browsers, which support [].forEach(), and document.querySelectorAll()), given that CSS cannot (yet) perform this task, is:
function classToggle (evt, find, toggle) {
[].forEach.call(document.querySelectorAll('.' + find), function(a){
a.classList[evt.type === 'mouseover' ? 'add' : 'remove'](toggle);
});
}
var els = document.querySelectorAll('.test');
for (var i = 0, len = els.length; i<len; i++){
els[i].addEventListener('mouseover', function(e){
classToggle(e, 'test', 'highlight');
});
els[i].addEventListener('mouseout', function(e){
classToggle(e, 'test', 'highlight');
});
}
JS Fiddle demo.
References:
Array.prototype.forEach().
document.querySelectorAll().
Element.classList.
Function.prototype.call().
You could use JQuery to pretty easily achieve what you want... copy this to an .html file to test it...
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$(".test").hover(
function() {
$(".test").css("background-color", "red");
}, function() {
$(".test").css("background-color", "");
}
);
});
</script>
</head>
<body>
<div class="test">My Div</div><br />
<div class="test">My Div</div><br />
<div class="test">My Div</div><br />
<div class="test">My Div</div><br />
<div class="test">My Div</div>
</body>
</html>
It's impossible to select element's parent via CSS nowadays. So also it's impossible to select element by one element and general parent. It's like a tiny proof.
Here is the code:
css:
.sample{
background: none repeat scroll 0 0 #FFFFFF;
height: 105px;
opacity: 0.1;
position: absolute;
top: 0;
width: 5%;
}
.sample:hover ~ div{
color:red;
cursor:pointer;
}
html:
<div class="sample"></div>
<div class="container">
<div class="test">1111</div>
</div>
<div class="container">
<div class="test">2222</div>
</div>
<div class="container">
<div class="test">3333</div>
</div>
<div class="container">
<div class="test">4444</div>
</div>
<div class="container">
<div class="test">5555</div>
</div>
Check the demo here: http://jsfiddle.net/eN49z/
Quick answer: it is not possible via CSS-only to achieve the effect that you are looking for, as CSS is unable to travel up the parent, but only down the DOM tree to affect elements.
You can, however, rely on JavaScript to achieve the effect. In my example I have chosen to rely on jQuery. You can use various methods to get all other <div>s with the class test, but it depends on how they are nested - are they nested under parents that are siblings, and the level of nesting and etc.
Here is an example markup of the scenario you have described:
<div>
Parent 1
<div class="test"></div>
</div>
<div>
Parent 2
<div class="test"></div>
</div>
<div>
Parent 3
<div class="test"></div>
</div>
The CSS would be simple. The .hover class (not the :hover state) is added dynamically by jQuery (see below):
.test:hover, .test.hover {
background-color: red;
}
The JS would be something like:
$(function() {
$(".test").hover(function() {
// Find '.test' in all siblings of a specific '.test' parent
$(this).parent().siblings().find(".test").addClass("hover");
}, function() {
// You can refine the criteria of which '.test' should be selected.
$(document).find(".test").removeClass("hover");
});
});
http://jsfiddle.net/teddyrised/fHwFf/