Is there a way to make this work. I want to hover over the outer div and hide a child element without using javascript. Is something like this possible?
.fullwrap:nth-child(1):hover {
display: none;
}
To hide a child element you need an structure like this:
#parent:hover .yourchild {
display:none;
}
Where #parent is your outer div and has the :hover action, then you just match the child element to make it hide.
In this case I guess you have some structure like this:
<div class="fullwrap">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
Then to hide a child you can do some like this:
.fullwrap:hover :nth-child(1) {
display: none;
}
Check this Demo http://jsfiddle.net/55TWN/
Related
When displaying a div on hover, how can you target a specific div?
I need to display a hidden div from a link is on top of the page, and I can't figure out how.
When i tested, if the link and the div are one after the other, it displays corectly. but if i add another link before the first one, it does not work anymore.
From my testing using this CSS:
.expandable{
display: none;
}
.expand:hover+.expandable{
display:inline !important;
}
.expandable:hover{
display:inline !important;
}
And this HTML:
<div class="expand">expand</div> <!--this does not do anithing-->
<div class="expand">expand</div> <!--this works-->
<div class="expandable">expandable</div>
Try the below one
.expandable{
display: none;
}
.expand:hover ~.expandable{
display:inline !important;
}
.expandable:hover{
display:inline !important;
}
Only the hover on the second div works because of the behaviour of the '+' selector
https://www.w3schools.com/cssref/sel_element_pluss.asp
What W3C says :
Select and style every p element that are placed immediately after div elements:
div + p {
background-color: yellow;
}
you can hide div by id using : jQuery :
<div id=“div”>
</div>
<script>
$(“#div”).hide("slow"); // you can change "hide" to "show"
</script>
Consider this element hierarchy
<div>
A
<div>B</div>
</div>
Is it possible to hide text A but not B with CSS? The layout should also leave no empty space where A would be.
What I tried:
Setting visibility to hidden and resetting it on child leaves blank space
Setting font-size to 0 on parent and resetting on child works in FF but not WebKit on iOS
Here is a JSFiddle for the problem
You may try using visibility:collapse:
body > span{
visibility:collapse;
}
span > span {
visibility:visible;
}
Fiddle Demo
Also this works with visibility:hidden;
body > span{
visibility:hidden;
}
span > span {
visibility:visible;
}
Fiddle Demo
Try this:
Use your same concept like this
CSS:
#a {
visibility:hidden;
font-size:0px
}
#b {
visibility:visible;
font-size:10px
}
HTML:
<span id="a">A
<span id="b">B</span>
</span>
DEMO1
DEMO2
FOR this HTML:
<div id="a">A
<div id="b">B</div>
</div>
DEMO UPDATED
Yeah, I think you're on the right track with the visibility stuff: it's the only property where the display doesn't override the visibility of the child element (display: none cannot be overridden on a child element).
Note that visibility: collapse is only applicable for table-cells (and works poorly even there): visibility: hidden is what you're after.
To counter the non-collapsing nature of visibility toggling, your could try to fiddle with absolute positioning.
Check out this demo for the basic idea: http://jsbin.com/hetis/2/edit
Can I realize this behavior by pure CSS:
If parent block has "hidden" class it child elements with "a" class must be invisible
Example
<div class="parent">
<div class="a"></div> // Visible
<div class="b"></div> // Visible
</div>
<div class="parent hidden">
<div class="a"></div> // Invisible
<div class="b"></div> // Visible
</div>
Try this
.parent.hidden .a
{
///display: none;
}
note:
visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.
and
display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there
Simply like this :
.parent.hidden .a { display: none; }
Note there is no space between .parent and .hidden.
Simply use a normal contextual selector:
.hidden .a { visibility: hidden; }
If you actually meant removing the element from rendering, instead of making it invisible (a rather different thing), then you would use .hidden .a { display: none; }.
It would, however, be illogical and confusing (to people reading the HTML source) to use a class name hidden for an element that is not itself meant to be hidden. A name like hidelinks might be better.
Yes, it is possible.
Try this:
.parent.hidden .a{visibility:hidden;}
DEMO.
Try this
.parent .a, .hidden .a{ visibility:hidden;}
Yes you can.
Add the below to your CSS.
div.parent.hidden .a{visibililty:hidden;}
Hope this helps.
I have something like:
<div id="content>
<h1>Welcome to Motor City Deli!</h1>
<div style=" font-size: 1.2em; font-weight: bolder;">Sep 19, 2010</div>
<div > ... </div>
What is the css selector for the second div (1st div within the "content" div) such that I can set the font color of the date within that div?
The MOST CORRECT answer to your question is...
#content > div:first-of-type { /* css */ }
This will apply the CSS to the first div that is a direct child of #content (which may or may not be the first child element of #content)
Another option:
#content > div:nth-of-type(1) { /* css */ }
You want
#content div:first-child {
/*css*/
}
If we can assume that the H1 is always going to be there, then
div h1+div {...}
but don't be afraid to specify the id of the content div:
#content h1+div {...}
That's about as good as you can get cross-browser right now without resorting to a JavaScript library like jQuery. Using h1+div ensures that only the first div after the H1 gets the style. There are alternatives, but they rely on CSS3 selectors, and thus won't work on most IE installs.
The closest thing to what you're looking for is the :first-child pseudoclass; unfortunately this will not work in your case because you have an <h1> before the <div>s. What I would suggest is that you either add a class to the <div>, like <div class="first"> and then style it that way, or use jQuery if you really can't add a class:
$('#content > div.first')
I'm trying to style all <select> elements that are a descendant of a <div>. I could have a put a class on them but i was trying to be clever :-)
I believe it doesn't work in ie6 but does it work in ie7 etc?
How do you do it
Here is one of my selects (it has no class or id) but they are all descendents of a div whose id is "content"
<div id="content">
<select >
<option></option>
</select>
</div>
Any ideas?
If you want any select that is a descendant of an element with id="content":
#content select { ... }
If you want any select that is a direct descendant of an element with id="content":
#content > select { ... }
If you want to limit it to only div elements with id="content":
div#content select { ... }
The second one might not work in some older browsers, but the others should work in even an ancient browser as long as it has any css support at all, like Netscape 4.
This should work across browsers:
#content select {
// Styles for selects inside the div with id `content'
}
.myDiv select {
font-family:verdana;
}
<div class="myDiv">
<p><select>...</select></p>
<p><select>...</select></p>
</div>
div#content > select {
}
.content select {
css here
}
I believe this is how you can accomplish this. Where "content" is the class of your div. This will format all selects inside of a div that has the class of "content".
Best of Luck!
Nick's solution only gets direct descendants, so it wouldn't get a select in a form in the div. This will get them no matter how many other elements deep they are:
#content select { width: 100px }
If you only want to get, for example, the text inputs you can do this:
#content select[type=text] { width: 100px }
and don't forget that password inputs are different than text inputs!