I have a pager in my page with anchors in it... I use the following css...
.page-numbers a {
color:#808185; cursor:pointer; text-decoration:none;outline:none;
}
.page-numbers a:hover {
text-decoration:underline;
}
.page-numbers a:visited {
color:#808185;outline:none;
}
But my anchor tag doesn't seem to take the css above instead it uses the css below,
a {
color:#0077CC; cursor:pointer; text-decoration:none;outline:none;
}
a:hover {
text-decoration:underline;
}
a:visited {
color:#4A6B82;outline:none;
}
Which i have given in the top of my stylesheet... Any suggestion...
The selector .page-numbers a means "an anchor tag inside a tag with the class page-numbers", e.g.:
<div class="page-numbers"><a>This would match</a></div>
If you mean an anchor tag with the class page-numbers, use:
a.page-numbers {
color:#808185; cursor:pointer; text-decoration:none;outline:none;
}
....
Are you sure your links are under a container with page-numbers class?
Are you sure your stylesheet is linked to the page correctly?
Are you sure its not link with page-numbers class? In that case you'll have to use a.page-numbers css selector to target the link.
Related
I have lots of vertical lines that are before <a> links, but I want to hide the third line.
Here is my CSS for my <a> before:
.header-social a:before {
//line style
}
I have tried using nth-child(), but i don't know how to use pseudo elements with nth-child().
.header-social a:before:nth-child(4) {
display:none;
}
Not sure how I could go into any more detail than I already have. Do I need JavaScript?
Do like this:
.header-social a:nth-child(3)::before {
color: red;
}
or using nth-of-type
.header-social a:nth-of-type(3)::before {
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 familiar with the :hover psuedo class and using it for elements as well as the typical link setup we're all used to. What I am trying to do however is create a situation where hover over one element would change properties of another. For instance if I were to hover over .block1, #block2 would become visible. I would think the .css would look like something this...
.block1:hover div#block2
{
visibility:visible;
}
but that's getting me nowhere. Thoughts? I know that I could probably use javascript to make this happen (make elements appear and disappear) but I would love to find a pure css solution to this.
The element you want to change has to be a child element of the one you are hovering over.
Example CSS:
#navButton div.text {
display:none;
}
#navButton:hover div.text {
display:block;
}
This will make the text div display if you hover over the element with id="navButton".
Otherwise, use a JQuery solution:
CSS:
#navButton div.text {
display:none;
}
.hover {
display:block;
}
Javascript:
$("#navButton").hover(
function () {
$("#navButton div.text").addClass("hover");
},
function () {
$("#navButton div.text").removeClass("hover");
}
);
Edit:
You can also do this for sibling elements in CSS if the hovered element precedes the element you want to modify. Like so:
#navButton + div.text {
display:none;
}
#navButton:hover + div.text {
display:block;
}
OR
#navButton ~ div.text {
display:none;
}
#navButton:hover ~ div.text {
display:block;
}
If that second element is a descendent of the first, then it will work.
jsFiddle.
i already have a css section:
.leftMemberCol
{
width:125px;
vertical-align:top;
padding: 13px;
border-width:0px;
border-collapse:separate;
border-spacing: 10px 10px;
text-align:left;
background-color:#f2f3ea;
}
for a td section (a left side bar). I want to make all of the links inside this cell be the color green.
is there any syntax like:
.leftMemberCol.a
{
color:#E3E3CA;
}
or any other suggestions instead of having to go to each page and wrapping all the links around another class name.
Just do:
.leftMemberCol a
{
color:#E3E3CA;
}
That will select all anchor tags nested within the element with the class of .leftMemberCol
If the color doesn't work, check if you set it earlier on in your CSS file for any of the pseudo selectors of the a tag, i.e. a:link etc.
override them using
.leftMemberCol a:link,
.leftMemberCol a:hover,
.leftMemberCol a:visited,
.leftMemberCol a:active
{
color: #E3E3CA;
}
replace the last dot with a space
.leftMemberCol a {
style goes here
}
The dot indicates a class. A hash indicates an id (
<div id="home">
can be styled with
#home { }
). A regular html element, like a td or a doesn't need a prefix.
.leftMemberCol a
{
color:#E3E3CA;
}
should do the trick.
You are very close. This is how you select the links inside the cell:
.leftMemberCol a
{
color: #E3E3CA;
}
You can read more about selectors here.
Edit:
If the style doesn't take effect, it's probably because you have some other style defined for the links that is more specific. You can make the style more specific by adding specifiers, for example:
td.leftMemberCol a
{
color: #E3E3CA;
}
As a last resort you can also use the !important directive:
.leftMemberCol a
{
color: #E3E3CA !important;
}
.leftMemberCol>a
{
color:#E3E3CA;
}
.leftMemberCol a
{
color:#E3E3CA;
}
This targets all <a> elements that are descendents of .leftMemberCol
Im trying to create a class called "deadlink" which is for any link within the GP_Content DIV, would this be valid?
/* unvisited link */
div.GP_content .deadlink a:link
{
color:#666666;
border-bottom:1px dotted #000000;
}
I think you want:
div.GP_content a.deadlink:link
{
color: #666666;
border-bottom: 1px dotted #000000;
}
If you intended for your deadlink class to be on the link then you'd want your selector to be the following.
div.GP_content a.deadlink:link
It is valid, but it works for links inside an element with the class deadlink, inside a <div> with the class GP_content.
May not be what you intend.
div.GP_content .deadlink a:link { ... }
What you've written targets all links inside elements of class deadlink which are inside the div. It sounds like what you want is actually to target links of class deadlink inside the div. That would be like this:
div.GP_content a.deadlink:link { ... }
However, from your description, it sounds like you want to target all links within the div. If it is all, rather than specific ones, just use this to target all links within the div:
div.GP_content a:link { ... }