This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Is there a CSS parent selector?
I have this code :
<div class="main_parent">
<a href="www.google.it">
<img src="/path/image.jpg" alt="image" />
</a>
</div>
and I'd like to set the attribute text-decoration:none; to the link that contains an image.
So, somethings like :
.main_parent img < a
{
text-decoration:none;
}
but of course it doesnt works. How can I do it with CSS 2?
Simply put, you can't. CSS can only traverse the DOM downwards. If javascript/jQuery is an option for you, you could use that.
Nope, this is not possible.
Some smart people also wrote about this: http://css-tricks.com/7701-parent-selectors-in-css/
You read CSS selectors from left to right. So there is no real syntax for this right now.
I think this is not possible via CSS. You would have to use JavaScript and assign the style via DOM manipulation.
You can even do it with CSS3. There is no parent selector unfortunately.
Related
This question already has an answer here:
Using :before and :after CSS selector to insert HTML [duplicate]
(1 answer)
Closed 8 years ago.
is there any CSS way to add div, p, span elements inside css content attribute?
I mean code like this
.textblockquote:before{
content: "<span class='green'>“</span>";
}
you won't be able to insert other things than text-element with css
BUT, what you want to do can be achieved this way :
.textblockquote:before{
color:green; /* <-- apply the styling you want */
content: "\0022"; /* <-- escaped unicode for 'quote' */
}
In the meantime, your question has already been answered (30 months ago): Using :before and :after CSS selector to insert Html
Look :
You can achive this with hexadecimal characters, but you shouldn't :)
See here: Adding HTML entities using CSS content
No, CSS is all about styling, not adding code.
You might be able to workaround this, but it's very bad practice.
It will probably be easier to achieve the requested effect or design in another way.
Its possible but its designed for text not html.
http://www.quirksmode.org/css/content.html,
Here is an example how you can achive this in Firefox. ( 2nd answer )
Insert HTML from CSS
You can add content as text for example, and customize it for you needs. In your case, you can add quotes in content of :before and :after elements, and absolute position them where you want.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to write a:hover in inline CSS?
Using CSS, I want to define a link's style. However, I want to do it in document, instead of defining it as part of the header. Is it possible to define it (including a:hovor, a:visited, etc).
I'm using the tag, and I would like to be able to do
<a style="a:hovor:color:#ffffff"><!-- ... --></a>
or something like that. I'm pretty sure that doesn't work. So how would define that, or can you even?
No, you can't.
Please, if it is possible, refrain from inline styles. They are bad practice.
If you really need to do this inline without stylesheets, you can solve this with javascript:
<a onmouseover="window.oldlinkcolor=this.style.color;this.style.color='#ffffff';" onmouseout="this.style.color=window.oldlinkcolor;">...</a>
Though, using onmouseover and onmouseout statically like that is also bad practice, but it will solve your issue cross browser.
You can always apply a CSS style on Mouseover with Javascript/jQuery. With that said, you should really avoid inline styles. Why can't you use a Stylesheet?
I'd prefer to give it a class and then define it in a stylesheet, but it's possible with JS/jQuery.
http://jsfiddle.net/Sxpkp/
This question already has answers here:
Is there a css selector for selecting an element futherup in the html?
(4 answers)
Closed 8 years ago.
As the title says -
Here I have a link which contains img tag:
<a href="#">
<img src="somthng.jpg" />
</a>
I have to style this link, there is no class in the image or the link so don't suggest me to add a class. Further I don't want the styling of this link with any other link such as :
<a href="#">
<div>...</div>
</a>
So I'm trying to trigger the link by css a img {...}, but that would style the image not the anchor.
selectors? http://www.w3.org/TR/CSS2/selector.html
You could also use js to target the image file src and then use that to append a class to the link
The only thing you can do in this situation without resorting to javascript is look for anything that all anchors that contain images have in common. Or anything that all anchors that don't contain images have in common. Are they all nested in the same div structure with a specific class? Could you target them like this div#content div.inner div.someArbitraryClass a for example? Could you style all links the way you want them when they're around images and then find a way to override this style for other links, if they all have something in common? Sometimes you have to think outside the box.
... so you have to style the a tag only a {}, if you're using Firebug, get the CSS Path to that a tag, that's the only way you can get to it if at all. Assuming that's doable your like
some tag and another nested tag a{}
If you want to give padding, margin, width or height to link (i.e: a). Don't forgot to apply display-inline-block; to link.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
CSS selector for “foo that contains bar”?
All the <p> on my site get margin-bottom of 20px.
I don't want to apply this margin-bottom to <p> which contain an <em> element.
Is it possible to this without classes or id's.
CSS3 can be used.
To apply style to all p not containing an em:
p:not(:has(em)) {
margin-bottom: 20px;
}
I'm afraid this isn't possible with pure CSS.
Unfortunately, there is no way to do this with pure css. See Is there a CSS parent selector?
You could use some jQuery though.
$('em').parent().css('marginBottom','0');
http://jsfiddle.net/jasongennaro/5pPGF/
The only way I could see doing this in pure CSS is with a parent-node selector. Unfortunately, such a thing does not exist in CSS2 or CSS3.
What you're describing is basically an "ascendent" selector, selecting some element based upon its descendents. This isn't possible using just CSS, you would have to also use JavaScript.
Pure CSS does not do that (yet) as far as I know, but you can achieve this by smart use of jQuery:
$(function() {
$("em").parent("p").addClass("nomargin")
})
Or something like that...
Your question is unclear. Pleae recheck your question. But you can set margins, paddings for global tags like
p{margin:0}
or
*{margin:0; padding:0 } for all elements then change it for exact divs, classes. In that case all other ones still will set to margin:0, padding:0
This question already has answers here:
How can I write 'a:hover' in inline CSS?
(24 answers)
Closed 5 years ago.
I want to do something like this:
<li style="hover:background-color:#006db9;">
But it wont work. Is this possible to do in some way, or do I have to write the css in the head or external css-document?
It is not possible with inline styles, but the (in)famous onmouseover / onmouseout event handler can do the same thing.
<li onmouseover="this.style.backgroundColor='#006db9'" onmouseout="this.style.backgroundColor=''">
Caveat: CSS definitions with hyphens have to be translated to Javascript using camelCase, like (css)background-color = (javascript)backgroundColor
This is not possible using the style attribute. You'll have to use CSS, either in the document itself or in an external file.
li:hover { background-color:#006db9; }
If that's not an option then you'll have to resort to JavaScript.
AFAIK this can't be done inline without Javascript. You will have to put it into the head or external stylesheets as you already suggest.
A <style> tag in the body is also interpreted by all browsers I know but is not valid and therefore not recommendable.
AFAIK You can't use pseudo-classes (:hover, :active, etc) on inline css.
Instead of just having the <li>, you can nest it in an anchors tag <a href="#" class="hoverable"> and then put this styling at the top of the file or in an external CSS file:
a.hoverable:hover{background-color:#006db9}
Or you can just use Javascript to avoid using the anchor tag.
I'd recommend JQuery.