i have 2 div elements in html :
<body>
<div id="one"></div>
<div></div>
</body>
I want to hide div elements after div with id="one" from CSS, I tried this :
#one:after{display:none}
This doesn't work any other way to do?
No, :after pseudo doesn't do that, you need to use
#one + div {
display: none;
}
Demo
And if you want to hide ALL div followed by #one you will have to use
#one ~ div {
display: none;
}
Demo 2
:after applies to generated content. You want the adjacent sibling combinator:
#one + * {
}
If you know the exact position of the child element (like in you case its 2nd child), you can use nth-child pseudo class
div:nth-child(2)
{
display:none;
}
Fiddle:http://jsfiddle.net/ankur1990/HDq2T/
Related
Is it possible to style another element on :focus of a specific element?
Something like:
input:focus #header {
display: none;
}
I tried doing that but it didn't work.
Yes,it is possible if element is a sibling or a child to the :focus element. If it is not your case (affect whatever you want) than you should use javascript.
.input:focus #header
That is applying selecting all #header where they are a descendant of input
If its a sibling so you want, use the next sibling selector +:
input:focus + #header
For more information on child/sibling combinators
you can also use 'preceded by' selector -> https://www.w3schools.com/cssref/css_selectors.asp
HTML:
<button>button</button>
<div class="div1">div1</div>
CSS:
button:hover ~ .div1 {
color: red;
}
So you hover over the button BUT the div1 element gets styled.
Just make sure that the BUTTON element is first and the element you are styling is SECOND.
I am hiding a div with the class .text with
div.text{
visibility:hidden;
}
This div is surrounded by another div with the class .col3
<div class="col3">
<div class="image-box">
<div class="text"> test </div>
</div>
</div>
I want the visibility to change to "visible" when i hover col3
i tried
.col3:hover + div.text {
visibility:visible;
}
however it doesnt seem to work this way.
strange thing is , when i do
.image-box:hover + div.text{
visibility:visible;
}
It does show the text div when i hover the image box, but thats not what i want, i want it to show when i hover the surrounding div......
any help is welcome...
This should work:
.col3:hover div.text {
visibility:visible;
}
The use of the + selector is incorrect as it targets elements directly following the first element. More information can be found here.
+ in CSS is known as an "adjacent sibling combinator". A sibling is an element which is contained within the same parent as another element. In this case, your .image-box element is a sibling of your .text element. Both of these elements are children of your .col3 element. Your first selector will not select anything as .text isn't a sibling of .col3.
You'll need to use either a descendant combinator:
.col3:hover div.text {
visibility: visible;
}
Or a child combinator:
.col3:hover > div.text {
visibility: visible;
}
The reason why your
.col3:hover + div.text
Isn't working is because you're using an adjacent selector. What you're basically saying is "Take any div-node with the class text, that is lying on the same level as .col3, and do something with it when .col3 is hovered". But there isn't any. The div.text is not on the same level as .col3, but a direct child of it.
What you want to do is:
.col3:hover > div.text {
visibility:visible;
}
Which says "Take any div.text which is a direct child node of .col3, and do something with it, when .col3 is hovered".
I want solution using only CSS
we have 3 circle here.
Whenever I perform mouse-over on circles with class Name Mycircle , the circle with class Name BigCircle should change to red color
html
<div class="BigCircle"></div>
<div class="mycircle"></div>
<div class="mycircle"></div>
CSS
.mycircle,.BigCircle{width:50px; height:50px; border-radius:30px; background-color:grey; margin:3px}
.mycircle:hover{background:yellow}
.mycircle:hover .BigCircle{background:red}
Here is the demo >http://jsfiddle.net/JGbDs/4/
Thanks in Advance
In your comments you state that you cannot re-arrange the elements, but you can add ones if required.
For that reason the general sibling combintor in the accepted answer is not suitable as the .bigCircle element would have to come after all of the .myCircle elements.
There is no perfect way of achieving this using only CSS but it is possible by adding a "parent" element and using one of the following CSS solutions:
Solution 1
When hovering on the parent element, the .bigCircle child element will be coloured red:
Working example: http://jsfiddle.net/CKRef/
HTML
<div class="parent">
<div class="bigCircle"></div>
<div class="mycircle"></div>
<div class="mycircle"></div>
</div>
CSS
/* Add float to parent to fit width to content */
.parent {
float: left;
clear: both;
}
.parent:hover > .bigCircle{
background: red;
}
The issue with this solution is that the .bigCircle element will be coloured red when you hover anywhere on the parent, not just on .myCircle. Adding the float reduces this effect - but if you hover just outside of the circle then the .bigCircle will still be red.
Solution 2
Using the parent element as a relative container, we can add a new element to the page using the after pseudo selector when a .myCircle element is hovered over:
Working example http://jsfiddle.net/CKRef/1/
HTML
<div class="parent">
<div class="mycircle"></div>
<div class="mycircle"></div>
<div class="mycircle"></div>
</div>
CSS
/* replaced .bigCircle with mycircle:hover::after */
.mycircle, .mycircle:hover::after {
....
}
.parent {
position: relative;
}
.mycircle:hover::after {
content: "";
background-color: red;
position: absolute;
top: 0;
left: 0;
margin-top: 0;
}
The imperfection with this solution is that we are targeting the position of the first child of the parent element, rather than the element with the class name .bigCircle. Also, the after pseudo selector is not supported in IE7.
No. That's not possible using just css. "Any sibling" selector is not there in css.
However, if you can move BigCircle to end, you can use general sibling combinator which can select successor siblings.
.mycircle:hover ~ .BigCircle{background:red}
How do I delete the background of my last DIV using class="item"?
Parent is: <div id="lastQuestions"></div>
jsfiddle
.item:last-child {
background-color: inherit;
}
Use pseudo element last-child
Here is a working jsfiddle
Alternatively, you could use a different html tag (like span, p or li displayed as block) for the.item elements instead of div to differentiate them from other div elements, and then you can do something like:
#lastQuestions li:last-of-type {
background: none;
}
to select it.
quick illustration
Edit:
Since, according to your jsfiddle, only .item elements are of type div in your code they already differ in type from all other children of #lastQuestions. So you can just try this:
#lastQuestions > div:last-of-type {
background: none;
}
DEMO
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