I want to create unique styles for my links in a single particular div (So for example I want all links bold and red in the main body, but in the sidebardiv I want them blue and italic)
How do I go about it?
I have:
a:link{
color:#666666;
}
a:visited{
color:#003300;
}
a:hover{
color:#006600;
}
a:active{
color:#006600;
}
however if I put that in the sidebar div section it messes up my }'s
Use descendant selectors:
#sidebar a:link{ color:#134896; }
#sidebar a:visited{ color:#330033; }
#sidebar a:hover{ color:#942A5F; }
#sidebar a:active{ color:#6FB25C}
This is a fundamental css selector type, and you can chain as many descendant selectors as you wish, i.e.:
#content .navigation .header h1.red {
/* Properties */
}
This would match any <h1 class="red"> that is a descendant of an element with class header, that is a descendant of an element with class navigation that is an descendant of the element with id content.
Descendant selectors is one of the few selector types that actually works across browsers, so you can rely on them. It should be noted that you should have as few selectors as possible to achieve your targetting, as this will be a performance boost. Also, try not to specify the element type if you can avoid it (this is contradictory to the advice for JavaScript selectors), since it will tie your css to how the html looks now. A developer can decide to change a <span class="highlight"> to an <em class="highlight"> later, which would break a span.highlight-selector, while a .highlight-selector would continue to work.
a:link { font-weight: bold; color: #F00 }
#sidebar a { color: #00F; font-style: italic;}
#sidebar a:visited { color: #003300; }
#sidebar a:hover { color: #006600 }
#sidebar a:active { color: #006600 }
#divId a:link{ color:#666666; }
div#div_id a:link {style}
Repeat this as many times as you like for each div, and :visited, :active, :hover states.
a { font-weight: bold; color: red; }
#sidebardiv a { color: blue; font-weight: normal; font-style: italic; }
Related
Problem with Chrome when displaying my css styles:
The horizontal nav should have background grey and
text color black but on Chrome get maroon and text white.
On I.E 9 works fine but on Chrome not.
The style for the second nav looks ok.How do I resolve these conflicting styles.
Here is my codepen:
http://cdpn.io/uCgyF
add the shiv to your head
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
Add id to the ul and style accordingly as in this fiddle
<ul id="firstNav">
nav #firstNav a:link,a:visited{
color: black;
background-color:grey;
display: block;
}
(skip to the bottom for tl;dr)
When I first loaded your pen, I saw things correctly. But then I clicked on one of the header links and saw the behavior you describe. That tells us that a :visited selector is probably the issue. Take a look at your css code (I removed some to help illustrate the point):
nav#navigation a:link, a:visited {
background-color:grey;
color: black;
}
aside a:link, a:visited {
background-color: maroon;
color: white;
}
the comma (,) doesn't do what you think it does. the comma in css is shorthand for writing the same definition twice, so if we didn't have that shorthand, your css would look like this:
nav#navigation a:link {
background-color:grey;
color: black;
}
a:visited { /* <-- oops! */
background-color:grey;
color: black;
}
aside a:link {
background-color: maroon;
color: white;
}
a:visited { /* <-- oops! */
background-color: maroon;
color: white;
}
with your css, every visited link on the entire site (whether it is in your nav or not) will be white on maroon.
as a general rule of thumb, add a new-line after each comma in css. It will help you see these errors more easily.
tl;dr: do this:
nav#navigation a:link,
nav#navigation a:visited {
background-color:grey;
color: black;
}
aside a:link,
aside a:visited {
background-color: maroon;
color: white;
}
So in my CSS file, I have:
a {
color:#00adef;
text-decoration: none;
font-weight:bold
}
But I don't want all links to be of that certain color/weight. So how would I create a specific "instance" of it, so that I could define the CSS for all HTML tags within a specific div (say nav), but won't affect the links outside of that div?
Assuming your div has id nav and you want all links inside it to have these styles...
#nav a {
color:#00adef;
text-decoration: none;
font-weight:bold
}
Alternatively, you could assign a class to specific links...
Link1
Link2
using this css:
a.my-link-class {
color:#00adef;
text-decoration: none;
font-weight:bold
}
Just make the rule specific to all anchors within div#nav tag:
#nav a {
color:#00adef;
text-decoration: none;
font-weight:bold
}
You can select particular links within a block with the basic CSS syntax and the nav HTML5 tag:
nav a { /* every "a" tag in nav blocks */
color:#00adef;
text-decoration: none;
font-weight:bold
}
You can specify which div if you have many with a class or an ID:
div#nav a { /* every "a" tag in nav block id="nav" */
color:#00adef;
text-decoration: none;
font-weight:bold
}
You can make your "a" tag, selector, id or class specific. Like so..
nav a{
color:#f00;
text-decoration:none;
font-size:20px;
}
#menu a{
color:blue;
text-decoration:underline;
font-size:16px;
}
.menu a{
color:green;
text-decoration:underline;
font-size:14px;
}
Within the div id="nav" all the "a" elements will have the same style, as you set it through CSS (like the first div you see below). You can also create a second div to manage the styling when the mouse is over the "a" element.
#nav a {
color:#00adef;
text-decoration: none;
font-weight:bold;}
#nav a:hover{
color:grey;
text-decoration: underline;
font-weight:bold;}
#a1 {
color:#00adef;
text-decoration: none;
font-weight:bold
}
<a href="..." >Link</a>
Link1
<a href="..." >Link2</a>
I'm trying to remove the :hover behaviour in an :after pseudoselector for a link. But I think that it's not possible.
a {
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-size: 12px;
color: #666;
text-decoration: none
}
a:after {
content: "ยท";
margin: 0 2px 0 6px
}
a:hover {
text-decoration: underline
}
a:hover:after {
text-decoration: none
}
test
test
test
Checkout the JsFiddle.
Is it possible?
The easiest way to handle this is to wrap a span around the text in each link:
<span>test</span>
On :hover only the span is given text-decoration: underline:
a:hover span {text-decoration: underline}
See: http://jsfiddle.net/thirtydot/3N9vs/27/
A similar older question: Cannot undo text-decoration for child-elements
Also relevant: CSS text-decoration property cannot be overridden by child element
You need to give the :after psuedo element position:absolute; and give it margin to shift it. Also the anchor requires display:inline-block; in order for the :after content to appear correctly.
See: http://jsfiddle.net/ECFBR/
I've a button and I wanted to know if it is possible to make the css bellow shorter.
.button a:link, .button a:visited, .button a:hover, .button a:active {
color: #000;
text-decoration: none;
}
I mean maybe:
.button a:* {
color: #000;
text-decoration: none;
}
Maybe there isn't any shorter way, but I just wanted to know.
I found something like this out:
.button a:link:visited:hover:active {
color: #000;
text-decoration: none;
}
But it wasn't working, don't know why..
For information - I've general css for a in the top of the file:
a:link {
color: #DA5632;
}
a:visited {
color: #CE3408;
}
a:hover {
color: #289BF8;
}
a:active {
color: #CE3408;
}
So the button class a should overwrite the main a css.
.button a is all you need
I always set a default style on a, and target pseudo classes only when I need to have a different effect.
Edit to include fix from comments:
Because a default style for the a element is declared like:
a:link {
color: #DA5632;
}
a:visited {
color: #CE3408;
}
a:hover {
color: #289BF8;
}
a:active {
color: #CE3408;
}
at the top of the stylesheet, we need to make it body .button a by increasing selectivity we increase the importance of the styles applied.
Here are some things to try
make sure that your stylesheet has a rule for ".button a" - also make sure this stylesheet is included after the global one defining rules for "a".
If that doesn't work, try being more specific, as in: ".button > a", only selecting direct descendants.
If THAT doesn't work, while it's bad practice, you could always mark your styles as important, like so:
color: #fff !important;
this will demand that they are parsed last.
If I have this CSS:
a:link { color: blue; }
a:hover { color: red; }
#someID a:link { color: black; }
Links under the ID always appears in black on hover. I'm aware that using an ID gives a higher priority, however, I'm not overriding the :hover selector, only the :link selector, so shouldn't the hover display in red?
The :link pseudo class applies to the link even when you are hovering over it. As the style with the id is more specific it overrides the others.
The only reason that the :hover style overrides the :link style at all is that it comes later in the style sheet. If you place them in this order:
a:hover { color: red; }
a:link { color: blue; }
the :link style is later in the style sheet and overrides the :hover style. The link stays blue when you hover over it.
To make the :hover style work for the black link you have to make it at least as specific as the :link style, and place it after it in the style sheet:
a:link { color: blue; }
a:hover { color: red; }
#someID a:link { color: black; }
#someID a:hover { color: red; }
There's an order issue, as explained in W3Schools:
Note: a:hover MUST come after a:link
and a:visited in the CSS definition in
order to be effective!!
Note: a:active MUST come after a:hover
in the CSS definition in order to be
effective!!
http://www.w3schools.com/CSS/css_pseudo_classes.asp