My html and css files are set up correctly, however I'm having trouble with a certain selector.
I have the html here:
<span id="bottom_nav_bar">
Link 1
</span>
And the CSS here:
a#bottom_nav_bar{ color: red; text-align: center; }
However, my span is not getting selected and I can't figure out why. Any ideas?
It should instead be:
#bottom_bar_nav a {
color: red;
text-align: center;
}
As the <a> is a descendant of the <span> with the ID bottom_nav_bar
You're not targeting the a element. Your CSS selector is attempting to style an a element with an id of "bottom_nav_bar". In your HTML, however, the span has this ID and the anchor element is within the span.
To target the anchor tag, change your CSS selector to:
#bottom_nav_bar a { color: red; text-align: center; }
To target just the span, change a#bottom_nav_bar to span#bottom_nav_bar.
For more information about selectors, please see http://www.w3.org/TR/css3-selectors/#selectors
try this:
#bottom_nav_bar a{ color: red; text-align: center; }
use this to select the span link
span #bottom_nav_bar a{ color: red; text-align: center; }
Your link don't have this id, so it can't work...
Put your id to the a-tag ;)
Related
Is it possible to change the background-color of a div inside a link using only a :visited pseudo class and without using Javascript?
<!DOCTYPE html>
<html>
<head>
<style>
a:hover {background-color:blue;}
a:visited {background-color:green;}
.smallbox {
background-color: #666;
height: 50px;
width: 50px;
}
.smallbox:hover {background-color:blue;}
.smallbox:visited {background-color:green;}
</style>
</head>
<body>
<div class="smallbox"></div>
</body>
</html>
Yes, I believe you can do this. Just remember the visited pseudo class belongs to the link, not the div.
a:hover .smallbox {background-color:blue;}
a:visited .smallbox {background-color:green;}
a:visited .smallbox:hover {background-color:blue;}
.smallbox {
display: block;
background-color: #666;
height: 50px;
width: 50px;
}
<span class="smallbox"></span>
As pointed out by Dekel in the comments, a div inside an anchor element is invalid HTML. You could cheat and put a span inside the link and set its display property to "block", but that's probably not really better.
If you just need a link that behaves like a block element rather than an inline element, consider switching the anchor tag's display property to block and removing the inner element entirely as suggested in this post: <div> within <a>
Instead of applying it to a div, why not apply it directly to the "a" tags, as you did, and remove the div? Why do you need it? a: hover { background-color:blue; } should work just fine. You just need to add a display:block to the a:hover style, as well.
Or, if you have multiple a tags on the page and only want to apply it to one of them, you can use an id and apply it to that:
<a id="someId" href="#">My Link</a>
CSS:
#someId {
background-color: blue;
display: block;
}
how can i make an indent for hyperlink ?
I've tried as this code but no success.
a {
text-decoration: none;
text-indent: 20px;
}
html
If you don't want all hyperlinks to be indented, you could wrap it around a <div> with a unique id; this is an alternate solution.
HTML:
<div id="indented">
html
</div>
CSS:
a{
text-decoration:none;
}
#indented {
text-indent:20px;
}
text-indent is not avalaible for inline elements
https://www.w3.org/wiki/CSS/Properties/text-indent
a {
text-decoration: none;
text-indent: 20px;/* not avalaible for inline elements */
display: inline-block;
}
html
padding could help
a {
text-decoration: none;
text-indent: 20px;/* not avalaible for inline elements */
padding-left:20px;;
}
html
Put this into a CSS file and link it to your HTML file using the link tag:
a {
text-decoration:none;
text-indent:20px;
}
My strong suggestion is go with the CSS file, it's a lot cleaner and allows you to target more elements, not just that specific anchor tag
text-indent is for block or inline-block elements. So you can assign display: inline-block; or display: block; to the a tag and get the desired effect. Here's a demo http://codepen.io/anon/pen/WRvOQd
I'm working with a project where the placeholder color was defined globally by developer. But now I need to style a form with a different placeholder color. How can I address it correctly?
js fiddle
CSS
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder {
color: red;
}
::-moz-placeholder {
color: red;
}
:-ms-input-placeholder {
color: red;
}
.box input::-webkit-input-placeholder, .box textarea::-webkit-input-placeholder {
color: blue;
}
.box input:-moz-placeholder, .box textarea:-moz-placeholder {
color: blue;
}
.box input:-ms-input-placeholder, .box textarea:-ms-input-placeholder{
color: blue;
}
Try this code:
http://jsfiddle.net/vyDns/3/
you where close only needed to add .box in front like:
.box::-moz-placeholder
Cheers
Simply because I think the other answer by Filip Huysmans was just copied from Vucko's comment. I am going to also answer it and explain why your code didn't work.
Lets use this one as an example:
.box input::-webkit-input-placeholder {
color: blue;
}
Here you are selecting .box and then trying to find an input to change the placeholder colour. If your code was like this:
<div class="box">
<input placeholder="blue" />
</div>
It would have worked. In the code above you are selecting the class .box and then finding all inputs within it.
DEMO HERE
Now in your code we have:
<input class="box" placeholder="blue" />
So you are already in the input, thats why your code didnt work. There is no input in the input. So taking away input from the CSS and leaving just .box means you are selecting just that input.
.box::-webkit-input-placeholder
DEMO HERE
Hope this explains it well enough for you to understand where you went wrong.
You can reach your target in several solutions.
In the first one, you should change your HTML markup. With your CSS, you first search for the class "box", and the for the input element. So the working HTML markup would be:
<span class="box"><input /></span>
While the span element could be any other element, it should just have the box as class.
Demo 1
The second solution is to write the input (and also textarea) in your CSS in front of the .box element. So you call only input and textarea elements which have the "box" class.
input.box::-webkit-input-placeholder, textarea.box::-webkit-input-placeholder {
color: blue;
}
Demo 2
The last solution is to delete the input and the textarea part. So you'll call all elements, which have "box" as a class.
.box::-webkit-input-placeholder {
color: blue;
}
Demo 3
This worked for me
-webkit-text-fill-color: white;
opacity: 1;
Just add it in the input/text area tag directly
eg. https://codepen.io/anon/pen/LqgOOp
I want to change color of h3 links to red in this code:
<div class="news_headline">
<h3 class="breaking">title</h3>
</div>
I change css to:
a.breaking {
padding-right: 40px;
background: url('../images/icons/news_breaking.png') right center no-repeat;
color: red;
}
but it doesnt works!!! it display header as blue! here is css I change:
http://paste2.org/p/1959809
change a.breaking to .breaking a or add the breaking class to the anchor element.
a.breaking means: an a-element that has a breaking-class like this: <a class="breaking" href="#">title</a>
You can bind the style to the h3-element like so:
h3.breaking { /* h3 instead of a */
padding-right: 40px;
background: url('../images/icons/news_breaking.png') right center no-repeat;
color: red;
}
or you can add the class-attribute to the a-element:
<div class="news_headline">
<h3><a class="breaking" href="#">title</a></h3> <!-- class is in a, not in h3 -->
</div>
You should be wrapping the heading tag with the anchor tag http://davidwalsh.name/html5-elements-links
you should use .breaking a {}. This will then apply the css rules to all elements that have class='breaking' or are <a> tags.
two great tools for debugging css and javascript are firefox's firebug plugin or chrome's console. These make it easy to see where each element is getting its css from.
you should define the red color also for a:link and a:visited (since you defined a darkblue in your css code, line 10), so try
.breaking a {
padding-right: 40px;
background: url('../images/icons/news_breaking.png') right center no-repeat;
}
.breaking a, .breaking a:link, .breaking a:visited {
color: red;
}
The implementation is here: http://jsfiddle.net/chp8y/1/
If you hover over the first box, #1, you will see the 'Add Client' change color but the #1 won't. How do I achieve that without using JS ?
If you do a .sit-in-the-corner:hover it will only work when you hover over the 1. But that's not what I want.
Thoughts?
Isn't it a case of changing the last rule to:
table td:hover, table td:hover span {
color: #aa5650;
}
THe style for the class has higher precedence than the style for the tag, so it will override it.
You can add a style that removes the specific setting for the span when the cell is hovered:
table td:hover .sit-in-the-corner {
color: inherit;
}
http://jsfiddle.net/chp8y/5/
Wrap the #s with anchor tags. Drop the color attribute from the .sit-in-the-corner and add that attribute to the anchors. Like this:
HTML:
<span class="sit-in-the-corner"><a class="tile-number">1</a></span>
CSS:
.sit-in-the-corner {
float: left;
margin-left: 5px;
margin-top: -85px;
}
.tile-number {
color: #556655;
}