in my navigation bar i have this code.
<div id="aboutnav"><a class="hl" href="#"><h2>about\a</h2></a></div>
all the div does in the case is put the text in position and in the a.hl it's -
a.hl{
background-color:#000;
text-decoraction:none;
color:#fff;
}
the text is the right colour, it is in the correct position but there is no background colour.
This is because in HTML4/XHTML you can't nest hx elements into a! Try using this instead:
<div id="aboutnav"><h2><a class="hl" href="#">about\a</a></h2></div>
I think you would need to update your css in a similar way:
a.hl{
display:block;
background-color:#000;
text-decoraction:none;
color:#fff;
}
Your style is probably being overridden by another style for h2. Try:
a.h1 h2{
background-color: #000;
}
You should write the HTML like this
<div id="aboutnav">
<h2>
<a class="hl" href="#">about</a>
</h2>
</div>
And then style it like so
#aboutnav h2 {
background-color:#000;
}
#aboutnav h2 a {
text-decoration:none;
color:#fff;
}
Example: http://jsfiddle.net/jasongennaro/rbxBL/
Fyi... you had text-decoration misspelled.
Also, you really don't need the class for the a when the HTML is done this way.
Related
<div id="quicklinks">
<div class="sidenav-header">
<h3>Quick Links</h3>
</div>
Link One
Link Two
</div>
In the above code I have two links. It seems to address the style of the second link in this code block I am having to target the 3rd element. My CSS is addressing the <a> tag though
#quicklinks {
height:120px;
}
#quicklinks a {
display:block;
color:#fff;
text-align:left;
background:#92d050;
margin:6px 12px;
padding:10px 12px;
text-decoration:none;
border-radius:3px;
font-weight:normal;
}
#quicklinks a:nth-child(3) {
background:#ff9900;
}
Why is my nth-child set to #3 to effect the 2nd a element?
nth-child(3) is selecting the third child element of any type, including your <div class="sidenav-header"> element. You should use a:nth-of-type(2) to select the 2nd child element of type a
I am trying to figure out how to target only the first that resides within a on one of my pages...
Maybe I am doing something wrong, looking for help.
<div id="mem-tools">
<div class="members">
Link One
Link Two
</div>
</div>
In my CSS, I have the following code:
#mem-tools a{
padding:15px 0 0 65px;
font-weight:bold;
color:#444444;
font-size:14px;
height:35px;
display:block;
}
however, I only want the first to be styled this way, and not the second within the .members class
From what I understand psuedo classes do not work for IE, so I an not use :nth selector.
Can I define the first only, to use the above noted style?
Am I over complicating this?
The :first-child would work, but if you don't want to use pseudos can also create a class to style the element... might be eaiser:
<div id="mem-tools">
<div class="members">
Link One
Link Two
</div>
</div>
Then you can style the class accordingly:
#mem-tools a.first-link{
padding:15px 0 0 65px;
font-weight:bold;
color:#444444;
font-size:14px;
height:35px;
display:block;
}
That way you can avoid pseudos.
#mem-tools a:first-child might do the trick
.mem-tools +a {
/*
try your Styles here
*/
}
In the below example link 2 comes out white and not black as expected how can I style the color of link two without wrapping it in a container tag?
.text a{
color:#FFF;
}
.black{
color:#000;
}
<div class="text">
Link 1
Link 2
</div>
Your second selector needs to be more specific than the first one to override it:
.text a {
color:#FFF;
}
.text a.black {
color:#000;
}
<div class="text">
Link 1
Link 2
</div>
It comes out white because the previous selector has higher specificity. One solution in this:
.black{
color:#000 !important;
}
This can cause complex problems if you use it too much, however. Generally the best solution is to try and avoid too many selectors. Have one selector that sets a default style for links, then only use classes to change specific links. For example:
a {
color: #fff;
}
.black {
color: #000;
}
It turns out white because the first selector is much more specific, namely: get a link in an element that has a class "text", whereas the last is merely get any element with the class "black".
You can solve this in two ways:
.text a.black {
color:#000;
}
OR
.black{
color:#000 !important;
}
In which 'important' overwrites other rules that are give to elements with the class "black".
here is working solution you just apply the style to black with id rather than class:
.text a{
color:#FFF;
}
#black{
color:#000;
}
<div class="text">
Link 1
Link 2
</div>
As others have mentioned, it comes out white because your previous selector for "a" tags is more specific than your "black" class.
There are two options here:
Be more specific:
.text a{
color:#FFF;
}
.text a.black {
color:#000;
}
<div class="text">
Link 1
Link 2
</div>
Or, you could us the "!important" rule:
.text a{
color:#FFF;
}
.black{
color:#000!important;
}
<div class="text">
Link 1
Link 2
</div>
I would strongly advise the first approach, but in some situations, "!important" can be a quick fix until you figure out where the real problem lies. Don't abuse the "!important" rule because it'll mess you up for the future - trust me on that!
Hope this answers your question. Have a good day.
Michael.
Currently I'm having a solution, but I'm almost certain that there's a better solution out there. Basically I'm having a block-element and want to align some of the text at the beginning of my block and some at the end.
Here's a little jsfiddle example
What I'm doing is using float and 2 more block-elements inside to align it:
<div id="block">
<div id="start">1</div>
-
<div id="end">12</div>
</div>
#block {
text-align:center;
background: #000;
color: white;
width:150px;
}
#start {
float:left;
}
#end {
float:right;
}
I have many of those little objects, so my code is bloated with div's. Is there no more lightweight solution for this out there ?
I fiddled a possible answer based on the answer to this question.
http://jsfiddle.net/ScHdJ/2/
Works in all browsers, as far as I can see...
May be you can use CSS :after & :before pseudo classes like this:
HTML:
<div id="block">
hello
**</div>
CSS:**
#block {
text-align:center;
background: #000;
color: white;
width:150px;
overflow:hidden;
}
#block:before{
content:"1";
float:left;
}
#block:after{
content:"12";
float:right;
}
http://jsfiddle.net/ScHdJ/3/
But is not work in IE7 & below.
I have a link inside a DIV. How can I change the color of this link inside this div. This code does not seem to work
<style type="text/css">
.someDiv
{
font-size:14px;
color:#c62e16;
}
</style>
<div id="someDiv">
SOne Text
</div>
Thanks.
ids are accessed by a pound sign (#), and classes are accessed by a period (.)
<style type="text/css">
#someDiv a
{
font-size:14px;
color:#c62e16;
}
</style>
<div id="someDiv">
SOne Text
</div>
use
.someDiv a {
font-size:14px;
color:#c62e16;
}
You are using the wrong selector. You have an id="someLink", and the CSS is looking for the class="someLink". Try with #someLink, it'll work.
div#someDiv a{
color: #hexcode;
}
That will work too, you use the selector to select ALL the elements of the type "a" in a div with the id="someDiv".
While you're using the wrong selector for someDiv you will usually need to set a colours separately:
#someDiv, #someDiv a {
color: red;
}