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).
Related
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;
}
If I have 2 elements side-by-side in the DOM like this:
a.button
div.container
I want to target a.button if div.container has class div.container.fullscreen
I was thinking something like this:
div.container.fullscreen + a.button { display:none }, but it does not work.
Any suggestions?
+ won't work as it's the next sibling selector.
Your selector div.container.fullscreen + a.button would target the a if that was the next immediate sibling of the div, e.g.
div.container.fullscreen
a.button // this is now targeted
div.container.fullscreen ~ a.button won't work either as that'll select all the siblings after, and not before.
a.button // this isn't targeted.
div.container.fullscreen
a.button // this is now targeted
a.button // so is this
Sadly, there is no previous sibling selector to achieve what you want using pure CSS.
The E + F syntax only matches if E precedes F. If they are ordered like you just described, I don't think you can style the a with pure CSS.
You might simply change the HTML to put the fullscreen class on the parent container of both container and button. That way, you can use the following declarations to style:
.fullscreen > div.container {
/*
any fullscreen modifications to be done, what used to be in div.fullscreen
*/
}
.fullscreen > a.button {
display: none
}
missing your real html. <a> has an href attribute ? Is it targetting <div> ?
Button doesn't have necessary to be hidden if it stands hidden under div once full expanded , it 's being hidden by div itself.
Form elements can help see idea in action :
http://codepen.io/gcyrillus/pen/otFim
Hopefully this isn't a stupid question but I can't seem to work out how to do this. Can you apply a wildcard to an anchor hover/focus so that the style is applied to all classes?
Something like
a:hover * { color: #ff0000; }
Say I have
a { color: #DD0000; }
a.link { color: #ffffff; }
a.link2 { color: #000000; }
a.user { ...
a.anything { ...
The easiest way to explain what I'm looking for is to have a global :hover style, but multiple :link styles.
Thanks
There are a number of ways you can do this. As mentioned by others, you can apply the same style to multiple classes like so:
div a.class1:hover, div a.class2:hover, div a.class3:hover { ... }
You can also create a custom class just for the style you want to apply:
div a.customClass:hover { ... }
You could use * like you mentioned in the question, but apply hover to it:
div *:hover { ... }
There's also this option, where you just apply the style for all a's, although you probably know about this option already:
a:hover { ... }
Edit: If your style is being "overwritten" by something else, a quick and easy way to check would be to use your browser's developer tools to inspect the element. You can even apply pseudo-classes (ie. apply :hover pseudo-class even when you're not hovering over the element) with the developer tools included with Chrome and Firefox (you may need to download Firebug to do this with Firefox).
Another option would be to use !important to increase the selector's specificity. For example:
a:hover { background: red !important; }
You can read more about how the specificity is calculated here.
If you want to apply a global css rule for a specific tag, write (for anchors):
a:link{/*your styles go here*/}
a:hover{/*your styles go here*/}
a:active{/*your styles go here*/}
a:visited{/*your styles go here*/}
If you would like a special link styled in a different way (maybe making it a button), just apply a class to it and style the class:
a.customlink{/*your styles go here*/}
EDIT: if you want only some properties of the link to change on hover, which are going to be the same for two different links (let's say one ha yellow, while the other red colored background, and you wanted them both to have a black background), add another same class to the two links, and stylize it.
JsFiddle Example
You could separate them by commas like a:hover link, a:hover link2, a:hover etc { color: #ff0000; }
Does a:hover { color: #ff0000; } not do what you want it to?
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/
This seems painfully simple, but I can't work out how to do it:
I want every link on my site to have a specific style on mouseover, so I use
a:hover {
/*style goes here*/
}
The thing is, I don't want that style applied to links that are images, but
a:hover img {
/*reset style*/
}
doesn't work. What should I try instead?
Your attempt is restyling the image element, not the a element, which is why it doesn't work (see here for an explanation of CSS selector syntax). Unfortunately, there is no syntax for selecting the parent of an element, so as others have said, you will have to create a special class for image links.
For links that are images, use a different css class instead of referencing all anchor tags.
The only way to do it is to put a class on the as that enclose imgs, like so:
<img src="image.jpg" alt="Image" />
And then select it in CSS with
a.imagelink:hover {
/* styles */
}
Try this:
a:hover {
/*link style goes here*/
}
Select all images with links when hovered and set another style.
a:link:hover img {
/* hovered, linked image styles */
}
This will select only images that have links and are hovered over.
Works in Weebly as well.