I've got this situation I think is weird, where
a:hover {
color: #FD5454;
}
doesn't work, but
#feed h3 a:hover {
color: #FD5454;
}
does. It has been some time since I used CSS extensively, so I have no idea why. Could someone please explain this to me? It surely must be a stupid question, but I just couldn't figure it out myself. Thank you in advance!
EDIT:
Here's the code it is affecting at the moment:
<div id="feed">
<h2>Follow us on instagram</h2>
<h3>#johndoe</h3>
</div>
And here are the complete style rules:
a:link {
text-decoration: none;
color: white;
}
#feed {
text-align: center;
background: url("../img/Feed_bg.jpg") center no-repeat;
height: 100vh;
}
#feed h2 {
color: #789199;
padding-top: 5vh;
}
#feed h3 a {
text-decoration: none;
font-family: "Lato Light";
color: white;
}
/* This is working */
#feed h3 a:hover {
color: #FD5454;
}
/* This is not */
a:hover {
color: #FD5454;
}
This is a case of CSS specificity. Here, your a:hover selector isn't specific enough to override the #feed h3 a rule. As MDN notes:
The following list of selector types is by increasing specificity:
Type selectors (e.g., h1) and pseudo-elements (e.g., :before).
Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).
ID selectors (e.g., #example).
And as you discovered, by adding #feed in front of your hover selector (#feed a:hover) increases the specificity to override the other selector.
jsFiddle example
There are many CSS specificity calculators available online and you can see that a:hover has a specificity of 0011, while #feed a:hover has 0111.
Related
I have a simple setup with a:link, a:visited a:hover and a:active all defined at the top of my style sheet. I also have a div where I've defined an a:link color for anchors inside of it. When I do this those links do not inherit the remaining pseudo classes for hover and active.... until I click that div's link and it has thus been "visited", at which point the pseudo classes start working. Why is this?
the CSS...
a:link {
color: blue;
}
a:visited {
color: purple
}
a:hover {
color: red;
}
a:active {
color: pink;
}
#theDiv a:link {
color: green;
}
the HTML...
The First Link
<div id="theDiv">
The Second Link
</div>
http://jsfiddle.net/ZKztj/7/
#theDiv a:link has a higher specificity than all your other selectors and is overriding them until the link no longer matches the :link selector, at which point it matches the :visited selector.
All browsers set a default style for anchor elements.
You need a more specific selector to override:
#theDiv a:hover {color:red}
I have a ccs sheet with the usual tags
a. {}
a.hover {}
I also have a div=id "footer" that I want to change the font style but the global a. and a.hover are overriding it even when I add a
#footer{
color: #333333
}
Can I override using this or do I need to try? a.#footer or a.hover:#footer
Basically the #footer as is wont work because of the a. mentioned above even though the other elements are working in the #footer div such as margin...just the font color and hover??
Can someone tell me how to style this and not let the global a. interfere with it?
Many thanks
It's all about the hierarchy of code:
HTML:
<div>
Sample link
<div id="footer">
Footer link
</div>
</div>
CSS:
a {
color: #ebebeb;
}
a:hover {
color: #000;
}
#footer a {
color: #3e3e3e;
}
#footer a:hover {
color: #609;
}
Try this piece of code
#footer a,
#footer a:hover{
color:#333;
}
what is dot after a ?
the correct form is a {} , a:hover {} , a#footer and a:hover #footer
If you are nesting a inside div element you need to use
#footer a {
color: #333333;
}
If you only use #footer {} it will apply the styles to div and a won't inherit the color, so you can also write
#footer {
color: #f00;
}
#footer a {
color: inherit;
}
This is a matter of specificity. Styling the <a> elements directly is more specific then just applying some CSS to the <div id="footer"> element and all of its children. You can target any links within your footer by using
#footer a {
color: #333;
}
Due to the descendant selector this rule itself is more specific than the one you're using for all the other <a> elements outside of the footer.
I'm using this code:
::-moz-selection { background: #c92127; color: #fff; text-shadow: none; }
::selection { background: #c92127; color: #fff; text-shadow: none; }
Now I want to use this on any element inside a certain div.
My code for my wrapper is
<div id="wrapper" class="Red">
So I went with this for my CSS selector
div#wrapper.Red::-moz-selection { background: #c92127; color: #fff; text-shadow: none; }
div#wrapper.Red::selection { background: #c92127; color: #fff; text-shadow: none; }
But this does not work. It does work when I just use the selection code at the top of this question though.
So my question is: Does ::selection apply to all child elements (i.e. my selector is wrong) or is this not possible?
Here is an example in response to BoltClock's jsFiddle
http://jsfiddle.net/6DBhV/1/
Your div#wrapper.Red::selection styles will indeed not be inherited by the ::selection of any children (in your fiddle, it's div#test::selection). Due to the way inheritance works in CSS, pseudo-elements cannot inherit from other pseudo-elements even if their real elements are related in some way as parents or children. The issue of nested selections was covered in much greater depth in this CSS WG mailing list thread.1
The reason why your ::selection style works is because the pseudo-element is applied to all elements, including both of your <div>s.
An easy solution to this is to separate ::selection from the rest of your simple selectors with a combinator:
/* Notice the space here - the descendant combinator */
div#wrapper.Red ::-moz-selection { background: #c92127; color: #fff; text-shadow: none; }
div#wrapper.Red ::selection { background: #c92127; color: #fff; text-shadow: none; }
Updated fiddle
1 This is also one of the reasons why ::selection was dropped from CSS UI 3. Here's hoping it'll return in UI 4 after it's further tested and defined.
To apply/include all child elements, this is my solution :
div#wrapper > * ::selection,
div#wrapper > * ::-moz-selection {
background-color: #c92127;
}
It works for Firefox and Chrome.
Ref: CSS * Selector and
CSS element>element Selector
I'm having an issue where my CSS for td tag seems to be given priorty over more specific CSS class I've included, blue_link. The blue_link class appears at the bottom of the style sheet and I've confirmed the priority issue in Chrome's element inspector.
Any suggestions would be greatly appreciated.
CSS that is being given priority:
td a:link, td a:visited {
color: #333;
text-decoration: none;
}
Desired class:
a.blue_link {
color: #5299c3; !important
text-decoration: none;
}
HTML:
<td><a class="blue_link" href="profile/edit/<?php echo $profile_item['profile_id'] ?>">edit</a></td>
a.blue_link, a.blue_link:link, a.blue_link:visited {
color: #5299c3;
text-decoration: none;
}
Your important flag is in the wrong position:
a.blue_link {
color: #5299c3 !important;
text-decoration: none;
}
You should probably also apply the same pseudo classes for consistency and to get rid of the "!important".
I was trying to use a class with psuedo class in the less css mixin
a:link{
color:#138CB4;
text-decoration:none;
}
a:visited{
a:link;
color:#84B6CD;
}
But out put I got is this, which an invalid css
a:link{
color: #138CB4;
text-decoration: none;
}
a:visited{
a: link;
color: #84B6CD;
}
Am I missing something here or mixins don't support pseudo classes yet.
I was a little confused by this at first, too, and found myself jumping through hoops to get it to work. Although your post is old enough that it might pre-date this functionality for all I know.
Anyway, if you're just trying to add additional styles to an existing style via pseudo-selectors, you can use the '&' operator. It works kind of like a 'this' keyword, and turns nesting into a simple combination. So you should be able to do:
a {
color: #138CB4;
text-decoration: none;
&:visited {
color: #84B6CD;
}
}
This should compile out to something like:
a {
color: #138CB4;
text-decoration: none;
}
a:visited {
color: #84B6CD;
}
Note that you can also use the & to combine 'sub-selectors':
.outer {
color: blue;
.error {
//this will select elements that are .error inside-of/descending-from .outer
}
&.error {
//This will select elements that are .outer AND .error
color: red;
}
}
The official definition is unfortunately hiding in plain sight in the Nesting Rules part of the documentation.
I don't believe that is how you use mixin's in Less.
You have defined the link pseudo class and then nested it under the visited pseudo class. This doesn't actually mean anything and is why your are getting that output.
If I think what you are aiming for is to re-use your link styles across :visited and :link, you actually will want this:
.link {
color: #138CB4;
text-decoration: none;
}
a:link {
.link;
}
a:visited{
.link;
color: #84B6CD;
}
Not fully sure, what you want to achieve. But if you got tired of :link,:visted,:active (aka normal link) vs. :focus, :hover (hover styles), this works:
.anchor( #- ) {
a, a:link, a:visited, a:active {
#-();
}
}
.anchorH( #- ) {
a:focus, a:hover {
#-();
}
}
for example:
.anchor({
background: #fff;
});
.anchorH({
background: #ddd; /* darken on hover or focus */
});