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.
Related
This question already has an answer here:
Is there a selector for 2 or more elements with the same attribute value?
(1 answer)
Closed 4 years ago.
With CSS selectors, is it possible to select elements with an attribute value that is the same as the attribute value of another specified element? For example:
<a class="important" href="foo.bar"></a>
will always appear on the page, but the href might be anything. Then further on the page may be something like this:
<li>
</li>
This list again may contain anything but could contain <a> elements with the same href="foo.bar".
I want to be able to select those <a> elements within the list that have an href attribute that matches the href attribute of any <a class="important">
Is this possible with CSS alone? I know this could of course be done in javascript by making sure those specific <a> elements within the list are created with a class attribute, but I'm interested in if there is a purely CSS solution.
yes,
syntax
[{attri}={value}]
like this
.important{
color:#0f0;
}
.important[href="bar.foo"]{
color:#00f;
}
.important[href="bar.bar"]{
color:#f00;
}
Mozilla Documentation - Attribute selectors
This question already has answers here:
How do I style a <select> dropdown with only CSS?
(25 answers)
Closed 5 years ago.
In Css we can genrally style all elements but I noticed that we can not style option element of a select using CSS. As far as I know Option is child element of select then what is possible causes that it don't let you style this element?
I've had reffered various answers on stackoverflow stating that You just can't style option. but I want to know exact reason behind it.
I've had reffered this link which says that option tag is rendered by OS and not by html. If so then why we need to specify option ? why it don't automattically render options.
Here is another link which shows how to style Select tag. But i want to know that why we can't style option? I don't want to know how to style select tag using CSS.
You cannot style the option element because it is rendered by the OS, not HTML. That is why it can't be styled via CSS.
You can of course use some plug-in that replaces select with regular HTML elements that can be styled.
There a duplicate method for this... its correct dropdown not accept the styling so you can make the thing which look like dropdown and give styling to that thing..
Here is the link of this explaination check Answer7
css style on select option
I have some HTML as follows ( you can assume closing tags )
<ion-content>
<ion-tab>
The problem is, when the DOM is created, the HTML5 tag creates a div which I cannot edit using CSS
It becomes as so
<ion-content>
<div class="foo">
<ion-tab>
I need to edit the CSS of the div whose class is "foo", however, if i change the CSS of foo, i change the CSS of all the classes using "foo".
How do I specifically apply CSS to that specific div when I dont create it myself?
With the small amount off details you have given us, all I can do is refer to these CSS Selectors.
There are number off ways to style a specific element. All have been explained in detail in the link I have given you.
Edit: CSS Selectors explained in detail.
There are several ways to change the style of <div class="foo">.
You could give the div an (extra) #id or class. This makes it able to apply certain styles, just you would do normally, to this specify element.
Another option would be parent child {} where you could style all the children within parent. Note: you could add '>/+/~' to be more specific of the place of child within parent.
A third option would be to specify at what place the div is within its parent using :nth-child(n) or nth-of-type(n).
As I said before, there are many ways to style a specific element. Please take a look at the link I provided.
This question already has answers here:
Does :before not work on img elements?
(16 answers)
Closed 7 years ago.
I have web application with some more pages and i cant change the all pages, but i can change the css code.
I have a img with "thumbnail" tag with css class to show the image.
i want to show a box over image with css.
.thumbnail {position:relative;width:128px;height:128px;}
.thumbnail:after {position:absolute;width:20px;height:128px;top:0px;right:0px;background-color:#ff0;content:" ";z-index:100;}
<img class="thumbnail" src="http://mrizvandi.com/Media/Image/QRCode/ContactInfo.jpg" />
When i use the :after in css, i cant see any effect!
Is there any solution to show overlay box without additional tag and just use css?
Thanks In Advance.
This is not possible. Replaced elements could not have ::before and ::after pseudo-elements.
Replaced content
If the computed value of the part of the 'content' property that ends
up being used is a single URI, then the element or pseudo-element is a
replaced element. The box model defines different rules for the layout
of replaced elements than normal elements. Replaced elements do not
have '::before' and '::after' pseudo-elements; the 'content' property
in the case of replaced content replaces the entire contents of the
element's box.
To insert text around replaced content, '::outside::before' and
'::outside::after' may be used.
You could solve the problem by selecting a parent element to place the pseudo-element.
Reference: w3.org - Generated and Replaced Content Module - Replaced content
Because of browser behavior and css rules, i change my strategy, and change all pages ;)
Add a div as container for image.
with style "position:relative"
Add image as child of div.
Add :after class to container.
.thumbnail {position:relative;width:128px;height:128px;}
.thumbnail:after {position:absolute;width:20px;height:128px;top:0px;right:0px;background-color:rgba(255,0,0,0.5);content:" ";z-index:100;}
.thumbnail>img {width:128px;height:128px;}
<div class="thumbnail">
<img src="http://mrizvandi.com/Media/Image/QRCode/ContactInfo.jpg" />
</div>
Thanks to all friends
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.