I am writing css code in which I use a selector:
nav a:link{
background-color: orangered;
margin-right:30px;
margin-top:100px;
}
Although these properties are applied on nav, but when I inspect, it is not visible on style window (where we see different elements and dev tools). But when I use nav{ different properties }, they are visible there. What should I do?
The code you have written above seems to apply styles to the tag inside the nav tag and will not apply styles to the nav tag.
For applying styles to nav tag, you should be writing css like
nav { css properties here...}
Related
I have this in CSS
header.site-header .col-sm-6 .menu-global-container {
a:visited {color: #888888;}
}
But I'm sure something is very wrong here as it is not working at all
Its a top menu on my site which has a link to a menu item which opens a page on my site.
This is the only way I could add a page link to this specific top menu in the theme I am using
header.site-header .col-sm-6 .menu-global-container {
a:visited {color: #888888;}
}
Is an invalid CSS selector. If you want to use only CSS, use like:
header.site-header .col-sm-6 .menu-global-container a:visited{
color: #888888;
}
But you can use some CSS preprocessor like LESS or SASS if you want to nest elements.
have you tried changing your css around like this to see if it works
header.site-header a:visited{color: red;}
Try doing header a:visited{color:#f93}
As it stands now your css is invalid you are unable to nest tags like you are doing now unless you are using scss or some sort of css pre-processor
I'm looking to style a li element, and would like to modify this CSS property:
li:before {
color: blue;
}
However, I am restricted to only using html, inline, styling. I don't have access to the section of the document I'm working on.
Is what I am trying to do, doable, and, if so, how?
You can insert a new stylesheet inline with the following HTML:
<style>
li:before { color: red; }
</style>
The reason this is the only way to do it is that :before is a pseudo-element, meaning that it doesn't actually become part of the DOM. Unfortunately, this means there is no way to style it inline, as requested.
As an example:
<li style="color: red;">text</li>
would style the entire LI element, not just it's :before pseudo-element, and because the :before element has no markup, it can not have it's own style= property.
In CSS, inline styles take precedence over linked CSS files, so you could do something like this with your li elements:-
<li style="color: red;">This is a list item</li>
And it would take precedence over either a linked stylesheet, or an internal stylesheet.
If you're wanting to use more complex selectors, you're out of luck unfortunately.
See: CSS Pseudo-classes with inline styles
You can add:
<style scoped>
li:before {
color: red;
}
</style>
Anywhere as a direct child of the <body> element and it will apply to the whole page, while also being valid HTML5.
Hopefully this isn't a stupid question but I can't seem to work out how to do this. Can you apply a wildcard to an anchor hover/focus so that the style is applied to all classes?
Something like
a:hover * { color: #ff0000; }
Say I have
a { color: #DD0000; }
a.link { color: #ffffff; }
a.link2 { color: #000000; }
a.user { ...
a.anything { ...
The easiest way to explain what I'm looking for is to have a global :hover style, but multiple :link styles.
Thanks
There are a number of ways you can do this. As mentioned by others, you can apply the same style to multiple classes like so:
div a.class1:hover, div a.class2:hover, div a.class3:hover { ... }
You can also create a custom class just for the style you want to apply:
div a.customClass:hover { ... }
You could use * like you mentioned in the question, but apply hover to it:
div *:hover { ... }
There's also this option, where you just apply the style for all a's, although you probably know about this option already:
a:hover { ... }
Edit: If your style is being "overwritten" by something else, a quick and easy way to check would be to use your browser's developer tools to inspect the element. You can even apply pseudo-classes (ie. apply :hover pseudo-class even when you're not hovering over the element) with the developer tools included with Chrome and Firefox (you may need to download Firebug to do this with Firefox).
Another option would be to use !important to increase the selector's specificity. For example:
a:hover { background: red !important; }
You can read more about how the specificity is calculated here.
If you want to apply a global css rule for a specific tag, write (for anchors):
a:link{/*your styles go here*/}
a:hover{/*your styles go here*/}
a:active{/*your styles go here*/}
a:visited{/*your styles go here*/}
If you would like a special link styled in a different way (maybe making it a button), just apply a class to it and style the class:
a.customlink{/*your styles go here*/}
EDIT: if you want only some properties of the link to change on hover, which are going to be the same for two different links (let's say one ha yellow, while the other red colored background, and you wanted them both to have a black background), add another same class to the two links, and stylize it.
JsFiddle Example
You could separate them by commas like a:hover link, a:hover link2, a:hover etc { color: #ff0000; }
Does a:hover { color: #ff0000; } not do what you want it to?
This seems painfully simple, but I can't work out how to do it:
I want every link on my site to have a specific style on mouseover, so I use
a:hover {
/*style goes here*/
}
The thing is, I don't want that style applied to links that are images, but
a:hover img {
/*reset style*/
}
doesn't work. What should I try instead?
Your attempt is restyling the image element, not the a element, which is why it doesn't work (see here for an explanation of CSS selector syntax). Unfortunately, there is no syntax for selecting the parent of an element, so as others have said, you will have to create a special class for image links.
For links that are images, use a different css class instead of referencing all anchor tags.
The only way to do it is to put a class on the as that enclose imgs, like so:
<img src="image.jpg" alt="Image" />
And then select it in CSS with
a.imagelink:hover {
/* styles */
}
Try this:
a:hover {
/*link style goes here*/
}
Select all images with links when hovered and set another style.
a:link:hover img {
/* hovered, linked image styles */
}
This will select only images that have links and are hovered over.
Works in Weebly as well.
i set up a style for all my links but the problem is that any anchor that has an image obviously will have the same style.
is there any way i can overwrite the style for the images without having to apply a class to all the images that removes that style?
a img {
/* alternative style for hyperlinked images */
}
I would recomend rewriting your code to not use images but for your links with images just use clickable divs displayed as blocks.
<div id="x"></div>
.y {
display: block;
}
#x {
width:..;
height:..;
padding:0;
margin:0;
background-image:url(IMGPATHHERE!);
}
#x:hover {
width:..;
height:..;
padding:0;
margin:0;
background-image:url(THEHOVERIMGHERE!);
cursor:hand;
}
No, there is no CSS selector which will capture <a> elements which contain only an <img> element. You will need to apply a class either at design-time or at run-time with javascript.
You can use jQuery qualified selectors $('a:has(img)')