I want to change the style of another element when a contenteditable div has focus as shown below:
[contenteditable="true"]:focus .testClass {
background-color: black;
}
<div contenteditable="true">Hello World</div>
<button class="testClass">Test</button>
Unfortunately the above isn't working, I have tried the following CSS also:
[contenteditable="true"]:focus + .testClass {
[contenteditable="true"]:focus > .testClass {
[contenteditable="true"]:focus, .testClass {
Using [contenteditable="true"]:focus on its own works fine to style the editable div when focus is applied, but none of these work to style another element at the same time. Is this possible to do?
You need to use ~. It's the general sibling selector which separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent. Check this:
[contenteditable="true"]:focus ~ .testClass {
background: red;
}
[contenteditable="true"]:focus ~ .testClass {
background: red;
}
<div contenteditable="true">Hello World</div>
<button class="testClass">Test</button>
More about the general sibling selector can be read over here.
Is this what you want:
[contenteditable="true"]:focus {
background-color: black;
}
<div contenteditable="true">Hello World</div>
<button class="testClass">Test</button>
Or this (you mentioned you've tried it, but it does work):
[contenteditable="true"]:focus + .testClass {
background-color: black;
}
<div contenteditable="true">Hello World</div>
<button class="testClass">Test</button>
Here some reading on CSS selectors:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors
[contenteditable="true"]:focus ~ .testClass will do the job as Fahad Hasan said
The ~ symbol means the first element right after ( not child )
you can change the style of .textClass when your div has focus, by using jquery:
$("div[contenteditable=true]").focusin(function () {
$(".testClass").css({
"background-color": "black",
});
});
Related
How can I add CSS to my child of child element, i tried this code
.inactive-property {
background-color: #e85050;
color: white!important;
}
.inactive-property > .mng-prop-span{
color: white!important;
}
My DOM element like
<div class="inactive-property">
<div class="a">
<div class="aa">
<div class="mng-prop-span"></div>
</div>
</div>
<div class="b"></div>
</div>
I want to apply css on class mng-prop-span
The element that is a member of the mng-prop-span class is not a child of the element that is a member of the inactive-property. It is a great-grandchild.
Use a descendant combinator (a space: ) and not a child combinator (>).
.inactive-property > .mng-prop-span{
color: white!important;
}
The first line is not correct. > is used for a quick next child. Better you try it without >
You can do this simply like that
.inactive-property .mng-prop-span{
color: white;
}
It will match the .mng-prop-span class inside .inacvite-property class
You do not have to use important property here.
If you want to match only those elements that are child of "aa" element inside "inactive-property" you can do this like that
.inactive-property .aa > .mng-prop-span{
color: white;
}
see here jsfiddle
code :
.inactive-property {
background-color: #e85050;
color: white;
height:100px;
width:100px;
}
.inactive-property .mng-prop-span{
color: black;
}
.mng-prop-span it's not a direct child of the .inactive-property , but it's a descendant so instead of > use .inactive-property .mng-prop-span{ with a simple space between the two
2.> is a child selector that selects children that are directly under the parent
i suggest you don't use !important only when it's absolutely necessary
for more info click here CSS Selectors
EDIT : could you explain the downvote ? ( the one who downvoted ) . i am very curious
Here is my code.
<div class="start">start</div>
<div>middle-1</div>
<div>middle-2</div>
<div>middle-3</div>
...................
...................
<div>middle-n</div>
<div class="end">end</div>
I want to apply css to all div's when mouse hover the first div with class start.
With the current HTML structure you can use couple of sibling selectors for this.
.start:hover ~ div {
color: red; /* styles you want to apply */
}
/* reset styles back for all other divs after .end */
.start:hover ~ .end ~ div {
color: inherit;
}
Demo: http://jsfiddle.net/3c6V6/1/
However I would recommend to change HTML structure if you can. For example:
<div class="start">start</div>
<div class="middles">
<div>middle-1</div>
<div>middle-2</div>
<div>middle-3</div>
<div>middle-n</div>
<div class="end">end</div>
</div>
<div>after-1</div>
<div>after-2</div>
and CSS:
.start:hover + .middles > div {
color: red;
}
You would just have much more flexibility.
Demo: http://jsfiddle.net/3c6V6/2/
Could it be as simple as putting a parent container around it, and putting the hover on that, or do you wish to single out some of the siblings directly?
In this case, try putting :hover on the parent container like this:
.parent:hover div {/*style*/}
This is for your second version found in the comments: JSFiddle DEMO
div.start:hover~div.middles div:not(.end) {
font-weight: bold;
}
(This is for your original question):
div.start:hover~div:not(.end) {
font-weight: bold;
}
JSFiddle DEMO
This is where I found the information to do it. Didn't know there were so many CSS selectors.
I can't find how to do this online, how do I go about selecting any elements within a element and apply styles to them. For example:
HTML:
<div class="cont">
<div class="txt">Hello World!</div>
<img src="img1.jpg">
<img src="img2.jpg">
</div>
CSS:
.txt:hover + img {
display:none;
}
I want that class style to hide ALL images next to it. It only hides ONE image at the moment though...
If you want to hide all succeeding image elements, use the general sibling combinator, ~.
.txt:hover ~ img {
display:none;
}
EXAMPLE HERE
You were using the adjacent sibling combinator, +, which will only hide the adjacent element.
You can do this in two ways; With CSS-only, and with jQuery:
CSS-way:
.txt:hover ~ img {
display:none;
}
jQuery-way:
$(function() {
$('.txt').hover(function() {
$('img').toggle();
});
});
Is there any way to change an element's css while focusing or hovering on one of it's children?
Ex: while I move my mouse on A, B's background color changes.
if B is a descendant A, it is possible.
--A
-----B
using #A:hover #B { background-color: blue }
DEMO
in sibling:
---A
---B
It is : #A:hover ~ #B { background-color: blue; }
DEMO
assume B is a descendant of A.
what if I want to change #A background, while I am hovering on B. how could it be?
--A
-----B
Doing this in pure CSS is unfortunately not possible...at this time. However, there is supposedly an upcoming parent selector that would work well in this scenario. Click here for more info.
Work-around
In the meantime, you can also use javascript and/or jquery to accomplish this pretty easily.
DEMO
HTML
<div id="div1">
div 1 area
<p id="paragraph">
This is paragraph
</p>
</div>
CSS
#div1 {
border:1px solid lightgray;
}
p {
margin: 50px;
background-color: lightblue;
padding: 8px;
}
.altbg {
background:grey;
}
jQuery
$(function(){
$('#paragraph').mouseenter(function(){
$(this).parent().addClass('altbg')
}).mouseout(function(){
$(this).parent().removeClass('altbg')
});
});
It is actually possible in css.
Somebody made this fiddle:
http://jsfiddle.net/u7tYE/
#a:hover + #b {
display:block;
background-color:rgb(200,200,150);
}
#b{display:none;background-color:rgb(200,200,150;}
<a id="a">Menu</a>
<div id="b">
<p>Home</p>
<p>About</p>
<p>Login</p>
</div>
It works perfectly.
I want to change another element property on hover of a element. So far I've I came up with the following CSS:
#test3:hover #test4
{
background-color: red;
}
<div id="test3">three</div>
<div id="test4">four</div>
However, this is not working. Is this possible at all? What would you suggest?
#test3:hover #test4
This means, target an element test4 that is a child of test3. You want the + sibling selector instead:
#test3:hover + #test4
{
background-color: red;
}
Browser compatibility table