I’m trying to learn a bit more about the CSS3 transitions and “cool stuff”. So I have some nifty animations on my site, and I did some google research that helped me out quite a bit.
I wanted to select an element outside of my hover element. I found out that using the + sign you can target an element that comes after the hover element. A small example (in LESS):
header{
display: inline-block;
div#bg_2{
color:#000;
}
div#container{
float:left;
&:hover{
& + nav {
ul{
opacity: 0;
}
li{
.transition(1200ms, ease-in-out);
margin-left:-100px;
}
}
}
}
nav{
height:30px;
}
}
So this example allows me to give a transition to the element after the hover element. But my question is, is it possible to do the reverse? To target the element before the hover element? In the example, the bg_2 element.
The ! subject selector in the CSS Selectors 4 draft specification would be a way to select a previous element. It proposes that instead of writing .one + .two { … } to style .two, you could write !.one + .two { … } to style .one.
However, ! is currently not implemented in any browser. And the CSS Selectors 4 specification can still change, because it is a draft. Also, the spec currently marks the ! subject selector as being in the “complete” profile, which is meant to be used by JavaScript, but not in the “fast” profile, which CSS must use.
Since you can’t use !, there is currently no way to select what you want with pure CSS.
See also this answer about there being no parent selector, which links to the CSS specifications where you can find all defined selectors.
CSS alone can't currently achieve what you're after. We have sibling selectors (+ and ~), but the element being targeted must come after the first element.*
As a simple example, check out this fiddle. Given this markup:
<p class="one">One</p>
<p class="two">Two</p>
and this CSS:
.one ~ .two { background: red; }
.two ~ .one { background: green; }
You might expect .one to end up green and .two red. In reality, only .two receives a background colour, because the second line is trying to style an element that comes earlier in the DOM.
* + is the adjacent sibling combinator, ~ the general sibling combinator. See this CSS Tricks article for details. They are very similar: + will only target an element that is directly after another specific element whereas ~ will target a sibling that appear anywhere after it.
Related
My site is test06.menchasha.ru. I am trying to apply a hover effect. A div in the right should appear when the link, 'Promotional Activities' is hovered.
Example
I used the following code:
.child1 {
display: none;
}
a .title1:hover + .child1 {
display: inline-block;
}
But the hover effect is not working. What should I correct?
Thank you in advance!
I've checked the code in your link - you simply can't achieve the effect you need with your structure and only with CSS.
Here is your code:
a .title1:hover + .child1 {
display: inline-block;
}
If you want it to work the way you need your a element must have 2 children: .title1 and .child1, also .child1 must be direct sibling of .title1 cause + selector helps you to access only the nearest sibling of the element. But in your structure all the .child elements are not siblings of .title elements, they are in another div block. So just use JS to make them visible on hover.
Can I add a class selector after a pseudo class in my CSS rule, e.g:
a:hover.my-class {
background: red;
}
So if I hover over my anchor tag, <a class="my-class">link</a>, will the background be red in all browsers? is this valid CSS?
Why I need this
I have this problem because it is generated from a mixin in SASS:
#mixin focus($classA, $classB) {
&:focus {
&#{$classA} {
background: blue;
}
&#{$classB} {
background: yellow;
}
}
}
a {
#include focus('.class-a', '.class-b')
}
There is no such thing as a "pseudo-selector".
There are two features in selectors that start with "pseudo-": pseudo-class and pseudo-element. They are completely different features with different syntax rules.
You can place a class selector after a pseudo-class such as :hover, because they are both simple selectors and order of simple selectors in a compound selector does not matter (type and universal selectors are the only exceptions to this rule — they always have to come first, such as the a in your example).
You cannot place a class selector after a pseudo-element such as ::before, because a pseudo-element is not a simple selector. Your question may not be about pseudo-elements, but this distinction has to be made because of the common use of the term "pseudo-selector", which incorrectly groups both features into a single umbrella term (and frankly makes the question more complicated than it really needs to be).
Yep, you can add a class to a pseudo class.
This css is valid and it works:
a:hover.hoverme {
background:blue;
color:white;
}
This works too:
a.hoverme:hover {
background:blue;
color:white;
}
Or you can add a pseudo class after a class.
.hoverme:hover {
background:blue;
color:white;
}
Hover me!
You can check if your CSS is valid at W3C's CSS Validator page.
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.
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/
Hello is there a way with css to style the 2nd element on page with the same class slightly differently to the first.
For example I have two ul's on a page with a class of topbardropdownmenu. I want to give the 2nd ul a differen't background to the first. Is there a way to do this with out altering the html?
You can do it with the :nth-child() pseudo-selector. It is CSS3 though, and not supported in some browsers (e.g. <=IE8 & <=FF3.0 doesnt support it).
.topbardropdownmenu:nth-child(2) { background: #FF0000; }
You could do it with JavaScript in a cross-browser compatible way though, if that's an option for you.
What holds the <ul> elements? I'll assume a <div id = "lists">
/* First element */
div > ul.topbardropdownmenu:first-child{
}
/* Rest of the elements */
div > ul.topbardropdownmenu{
}
...alternatively
div > ul.topbardropdownmenu:not(:first-child)
It depends which browsers your users are using, you might be able to use the nth-of-type css pseudo-selector:
ul.topbardropdownmenu:nth-of-type(2) {
/* styles the second ul of class=topbardropdownmenu
}
If there's a particular pattern to the occurrence of these ul elements, you could use descendant and/or sibling selectors:
div > ul.topbardropdownmenu {
/* styles all ul.topbardropdownmenu that are the immediate descendants of a div */
}
p + ul.topbardropdownmenu {
/* styles all ul.topbardropdownmenu that immediately follow a p */
}
Look at the CSS3 nth-child() pseudo-class.
You can use :nth-child http://css-tricks.com/how-nth-child-works/ but IE may struggle with it. Consider this jQuery alternative:
$(".class").eq(1).css();
http://api.jquery.com/eq/