Here is the JsFiddle
I have a css rule depending on the display status of a neighbor:
#top:not([style*="display: none"]) + #bottom {
color:red;
}
When I hide the '#top' div using javascript, the color changes since the css rule is no longer valid.
This is not the case in Internet Explorer and Edge ! Am I doing something wrong or is this just a bug in Microsofts browsers ?
I would avoid that approach, as it's somewhat fragile. Instead, explicitly toggle a class on a parent element or #top, and make your CSS changes based on that:
body.toggled #bottom {
color:red;
}
body.toggled #top {
display: none;
}
$("#btn").click(function() {
$('body').toggleClass('toggled');
});
Demo
Related
I am writing a stylesheet to extend a base stylesheet whose CSS has many pseudo classes applied to certain elements. I would like my stylesheet to override some of these styles with a single style that is applied to an element no matter what state it is in, whether hovered on, focussed etc.
For example, the base stylesheet might have the styles
.classname {
color:#f00;
}
.classname:hover {
color:#0f0;
}
.classname:active {
color:#00f;
}
but adding the following after these styles does not override the pseudo states...
.classname {
color:#fff;
}
The following works, but it feels a lot of code for something that seems simple.
.classname,
.classname:active,
.classname:hover,
.classname:focus,
.classname:visited,
.classname:valid{
color:#fff;
}
Likewise, I know an !important would work, but that's normally a warning sign of a poorly structured stylesheet.
Is there anything along the lines of a .classname:* that would cover every possible state, or some way to simply remove all pseudo classes?
If you are able to put the classes inside some wrapper id you can prevent the pseudo-classes to take effect due to specificity:
body {
background: black;
}
.classname {
color:#f00;
}
.classname:hover {
color:#0f0;
}
.classname:active {
color:#00f;
}
#a .classname {
color:#fff;
}
<div class="classname">all pseudo works</div>
<div id="a">
<div class="classname">none of the pseudo works</div>
</div>
I think, it could be solved with :any pseudo-class.
Google
<style>
a:link { color: blue; }
a:hover { color: red; }
a:-webkit-any(a) { color: green; }
</style>
https://jsfiddle.net/ycfokuju
Browser support is not perfect: https://developer.mozilla.org/en/docs/Web/CSS/:any
Edit:
Actually, as I discovered, this answer isn't very accurate. (Despite it was upvoted 4 times, lol).
First of all, you don't need :any fot this task. You need :any-link.
The second point is that :any itself is a former name of :matches. So, in our terminology we should use terms :any-link and :matches and don't use term :any.
Example of using :any-link: https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link
Examples of using :mathes: https://css-tricks.com/almanac/selectors/m/matches/
I haven't edited the code itself, so fix it yourself according to this new information.
I have this CSS Script here
#social_side_links li:nth-child(3):hover {
image
}
but it does not work....my image does not show up and yes the path is absolutely right...do I need to write this like
#social_side_links li:hover nth-child(3) {
This should work fine.
http://jsfiddle.net/EeHdF/
#social_side_links li:nth-child(3):hover {
border:1px solid #000;
}
Chaining :nth-child and :hover as you do here should work just fine. If you're using IE6, however, only the last pseudo-class in the chain will be recognized.
I know you feel the image is correct, but try another css definition like border (above) to see if it is an issue with your definition or the selector.
It's possible to know what CSS rules is applied to a specific node?
Example:
<div class="test-node">
<strong>Test</strong>
</div>
And the CSS rules:
div { color: blue }
div:hover { color: green; }
.test-node { font-weight: bold; }
div > strong { color: red; }
So, the div node is affected by two rules div and .test-node and the div:hover if hover node only. The strong node is affected by div and div:hover rule, because it is inner a div, but the color property is overwrited by your own rule div > strong (example http://jsfiddle.net/yyf9v/).
Basically I need discovery how I can do the samething that Chrome Inspector does in javascript. If you use Chrome, go to Inspector (CTRL + Shift + J, Elements and select a node). You will se a Styles tab, that show element.style rule (attribute style basically) and the Matched CSS Rules... I need this!
why dont you try firebug on firefox ... it is like the inspector in google chrome...
it shows all CSS classes applied for a specific node and what does it inherit and what is overriden.
you can find it here
http://getfirebug.com/
and here
https://addons.mozilla.org/en-US/firefox/addon/firebug/
How can I combine a pseudo-element selector (:after) with an attribute selector ([title])?
I tried using div[title]:after, but this doesn't work in Chrome.
HTML:
<div title="foo">This div has a title.</div>
<div>This div does not have a title.</div>
CSS:
div:after {
content: "NO";
}
div[title]:after {
content: "YES";
}
Demo: http://jsfiddle.net/jmAX6/
It shows me "YES" at the end of each of those div's, when it should show "NO" after the second div.
I'm running Chrome 17.0.963.38. It seems to work fine in Safari 5.1.2.
This looks like a bug, which has finally been reported. If you add a CSS rule for div[title] anywhere in your stylesheet with at least one declaration, your div[title]:after rule will magically apply. For example:
div:after {
content: "NO";
}
div[title] {
display: block;
}
div[title]:after {
content: "YES";
}
See the updated fiddle.
It also seems to have something to do with your second div having or not having certain HTML attributes, as shown in the comments below.
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');
}
});
});