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)')
Related
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...}
So I've got style.css which defines all my CSS classes. But I want to redefine a class for an entire page without modifying style.css. I know I could override the CSS properties by using the style attribute on each element, but I don't want to do that.
So let's say I've got the class colortext defined in style.css with color:blue; but I want it to be color:red; for one entire page. How can I accomplish this?
You could always place a
<style type="text/css">
.colortext { color: red; }
</style>
in your HTML document somewhere inside the <head> tag... however I'd recommend simply adding a rule to your stylesheet, if possible.
Now define your body id and do this css as like this
<body id="home">
<p class="red">hello</p>
</body>
Css
#home .red{
color:red;
}
add style tag top of your head closing tag and create same class add each element with !important
.old_class{
color: new_value !important;
}
Override is an option
* { color:red !important; }
This isn't a good way, ( but, I thought it sounded like he was implying he didn't wan't to use ids or classs )
I want to override another style sheet and set the float for all elements to none. If I use 'div, span, a' as the selectors or even 'body div, body span, body a', it doesn't override the previous class selector. I could use !important but this isnt great for obvious reasons.
.class {
float: left;
}
/* my overide */
div, span, a {
float: none;
}
Note- in the code ive only shown the class of 'class', but actaully their are many classes and id's.
Is there a way to do this without using !important? The reason im doing this is im mobile optimizing my site with media queries. I need to remove absolute positioning, floats, etc for all elements, but then i will want to add some of these styles to specific elements.
Thanks
As I wrote in my comment above:
Using the * selector is generally ill-advised. Selectors focus on the
key selector first (the right most selector) and so using the *
selector means that the browser must find all elements on the page.
This is a huge performance issue.
You can read more in this answer: (why) is the CSS star selector considered harmful?
Rather than using the * selector as you have, I'd stick with targetting the elements you want to affect, specifically.
Chances are, there will only be a few types of elements in your page that are floating.
These are usually some divs, perhaps some images, a list or two?
div, img, ul, ol{
float:none;
}
If there's a few more you can include them also.
#jdin; for overide the .class float just write like this:
div.class, span.class, a.class {
float: none;
}
EDIT:
Define an ID in your body tag like this
HTML:
<body id="home">
<div>Tag</div>
<span class="class">Class</span>
<div id="id">ID</div>
</body>
CSS:
body#home *{background:pink;border:1px solid #000}
Check this example http://jsfiddle.net/sandeep/D7Sg6/2/
I have been using asp:Menu control and in 2.0 it renders as table and collection of anchor tag. I can't use display block property display is inline for anchor tag. Has anyone been able to change it?
in css you can write code like this:
table a {
display: block; or inline;
\\ you can add any attribute that you want.
}
It applies the style on all <a> tags inside a table.
An anchor tag, if i'm understanding your question correctly, is simply an a tag.
You can style it several ways:
- with a class/id, which makes use of css's speed:
a.anchorClass {
display: block;
color: red;
... ... ...
}
or with javascript after page load, you can get the element and apply css styles to it.
With jquery this is very easy:
$('a.anchorClass').css('color', 'red');
a { display: block !important;}
That should override any other declaration.
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.