I'm trying setting up two simple css classes to toggle elements :
.hide{
display:none;
}
.show{
display:inherit;
}
It seems to work but sometimes display:inherit; return troubles so which is the exact opposite of display:none; ?
This all depends on the element you are specifying. For example <div> and <p> elements are display:block; by default, whereas <span> is display:inline; by default.
The accepted answer here provides a list of the defaults for each element based on what browser is being used.
EDIT
It appears that display: initial; will work in most browsers, although not IE. A fallback line of CSS would probably be best practice:
.show {
display: block;
display: initial;
}
If you use Javascript to do that:
document.getElementById(id).style.display = "";
And
document.getElementById(id).style.display = "none";
Can toggle the display for you.
If you are just toggling elements, you don't need two classes; you just need one class ("hide") that you add and remove for each element. When you hide the element, you add class "hide" to it, and when you show the element again, you remove class "hide".
However, if you really need two classes, I've had success with something like this:
.show{display:"";}
The blank value tells the browser to ignore that property, and it goes back to its default value.
It depends on which element you want to show, for block elements:
.show{
display: block;
}
Related
I'm trying to hide the text of this content:
<div class="avrow">Powered by Altervista Mailing List</div>
I tried:
.avrow > .avlink disclaimer > a
{
visibility: hidden;
}
not seems to working anyway, how can I fix this?
Your a tag has the class .avlink and .disclaimer. So the order of your CSS is wrong and if you have 2 classes on one element, you will need to append both class names.
.avrow > a.avlink.disclaimer {
display:none;
}
<div class="avrow">Powered by Altervista Mailing List</div>
If you are trying to hidde an specific element, you can try the next ones:
By Css
display: none
By HTML´s tag:
<div hidden>Your element, could be others elements as well</div>
The problem is that the .avlink class is not a child of a, but at the same level.
The following will achieve what you're going for:
.avrow > a.avlink
{
visibility: hidden;
}
See http://jsbin.com/holivirofe/edit?html,css,js,output for a working example.
Here you are:
.avrow {
display: none;
}
.avrow > a
{
visibility: hidden;
}
You could also take one of the class names like I did below.
.disclaimer {
display: none;
}
.disclaimer {
visibility: hidden
}
There two common ways of hiding elements in CSS. The first is the visibility property that you have been using. This simply hides the element but maintains it's properties such as size and margins. Therefore it has the effect of looking like it is not "hiding" the element correctly.
The other way is using the display property. By setting the display property to hidden it efectively renders the HTML as if the element is not there. This means the other elements are not affected by the hidden one.
Also your css selector is incorrect, it suggests there should be an anchor element below .avlink. Your selector should actually be:
.avrow>a.avlink.disclaimer
I have several divs. One of them has class="active". I want all the divs to be hidden (display:none;) except the one with .active. What should the selector be?
Have you tried?
div { display: none; }
div.active { display: block; }
PS. I'll add explanation. When you specify a class in a selector it has higher priority in cascading logic (because of its higher specificity) than just a single div (because single div is more generic, wider). So there is no need to use !important or stuff like that.
div:not(.active){
display: none;
}
Try the :not pseudo-class.
For example:
div:not(.active) {display:none;}
As Paul commented below, this selector is not supported in IE8 and below. But considering you included the CSS3 tag and specifically asked for a selector, that might not be an issue. For a cross-browser solution, see #mkdotam answer.
use !important in with css, something like that:
.active {
display: block !important;
}
and example: http://jsfiddle.net/hNLen/
I'm trying to transition a child element when the parent element is focused.
I want to do something like:
parent:focus{
//do something to first-child
}
Is this possible, or does this require JS?
I'm not sure if this is what you mean, or not. If you do...
.parent:active .child {
/* Style */
}
The style will be applied to .child elements inside the focused .parent.
Here's a fiddle that shows how it works. You can click anywhere in the big div to change the smaller (child) divs.
You should use
parent:focus CHILD {
//do what you want on the child
}
Example:
ul li:focus a {
color:#000;
}
Even if I'm not sure it will work with :focus that is usually used on inputs. It would be better to use it with :hover (for example).
I appear to have found a flaw with CSS3 transitions. Hopefully not though. Here is the dilemma.
.element a span {
display:none;
opacity:0;
position:absolute;
top:-10px;
-webkit-transition-property:top, opacity;
-webkit-transition-duration:500ms;
}
.element a:hover span {
display:inline;
opacity:0.8;
position:absolute;
top:10px;
}
The transition does not work like this at all. If one removes the display:none attribute then it does work, however we need in this case the display:none attribute on our link so that it cannot be interfaced with before hover.
Any ideas?
Marvellous
you could try put overflow: hidden on the a, that way the span should appear invisible, without the need to use display: none; as you have moved it 10px up.
or instead of display:none; try use visibility:hidden;
Changing display:none to display:inline makes the other properties moot as far as transitions are concerned. So separate the display:none/display:block change from the class change, using setTimeout. The browser needs to see them as separate changes in order to apply your transition. Sadly I think this means you can't just use :hover but will need a JS event handler on hover.
Specifically, I would use an inline style attribute of style="display:none" that you add or remove with JS, and take display:none out of the stylesheet.
Then, in JS, after removing display:none (explicitly or via the :hover pseudoclass's style rule), use a setTimeout function that explicitly adds/removes the class. That way the "this is display:inline" change is a discrete, earlier paint-able action from the other style property changes that you want the transition rules applied to.
In the opposite direction, change the class back in an event handler, and use a setTimeout function to set display:none as an inline style. The timeout will need to match the transition duration of course (so that display:none happens after the transition is complete).
or you can try using width or height 0 combined with overflow hidden on the invisible element so it doesn't disturb any of the other elements whilst preserving the transitions.
ie.
.element a span {
overflow: hidden;
height: 0;
width: 0;
opacity:0;
position:absolute;
top:-10px;
-webkit-transition-property:top, opacity;
-webkit-transition-duration:500ms;
}
.element a:hover span {
overflow: visible;
height: ???px;
width: ???px;
opacity:0.8;
position:absolute;
top:10px;
}
I would go with JS. CSS transitions suck with heights.
Here is what I used to make a click expand function, you could change a few things and do the same on a hover
// Dropdown
$(function(){
// Target the ul sibling to keep it generic
var selector = $('.dropdown article > ul').siblings().addClass('selector');
selector.click(function(){
var targetUl = $(this).siblings('ul');
if (targetUl.hasClass('open')) {
targetUl.removeClass('open').slideUp();
} else {
targetUl.slideDown().addClass('open');
}
});
});
I'm using the following css to alternate the background colour of li elements, but need the css to be maintained if the rows get the .hidden class assigned to them (.hidden class being display: none;).
ul li:not(.hidden):nth-child(odd) {
background: #fff;
}
ul li:not(.hidden):nth-child(even) {
background: #f4f4f4;
}
Any ideas on how to keep the alternating colours while adding / removing li elements to / from the ul? Please only give a CSS based solution if possible. I may have to do it in JS but would prefer not to!
Cheers
Due to the way the :not() pseudo-class works, you cannot use it to filter elements out of the DOM to obtain a subset of elements on which to apply styles. See this answer for the nitty gritty.
EDIT: Apparently my solution below isn't supposed to work either. I need to take a break from answering questions or something. So I guess the only other feasible route may be to do this with JavaScript. I'm keeping this post here instead of deleting as I don't want to take the comments down with it.
To this end, if you can modify the HTML, you can instead use a class that is common to all your lis and target that instead, in conjunction with :nth-of-type():
ul li.shown:nth-of-type(odd) {
background: #fff;
}
ul li.shown:nth-of-type(even) {
background: #f4f4f4;
}
What if you changed your .hidden to the following
.hidden {height:0px; overflow:hidden}
I haven't tested this code at all, but the elements would still be in the DOM for manipulation yet shouldn't be visible to the user.