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
Related
couldn't find an example that uses css :before to add <use> inside a <svg> tag. So far I've tried:
.icon-test:before {
content : '<use xlink:href="test.svg#icon-test"></use>';
}
.icon-test:before {
content : '\003Cuse xlink\003Ahref\003D\0022test\002Esvg\0023icon-test\0022\003E\003C\002Fuse\003E';
}
<svg class="icon-test"></svg>
Does anybody know the correct way to do it? Or this is not possible?
Basically the end result should yield something like:
<svg class="icon-test">
<use xlink:href="test.svg#icon-test"></use>
</svg>
But I want to simplify the usage by using :before. Thanks!
use ::before
is not possible. You will receive text;
A little more detail compared to Jarosław Goszowski's answer:
The ::before and ::after pseudoelements create a new CSS layout box as the first or last child of the CSS layout box for the element(s) matched by the rest of the selector.
The :: notation distinguishes pseudoelement selectors from pseudoclass selectors, and is supported in all browsers after IE8 (in other words, all browsers that will support inline SVG). The single : syntax is only supported for backwards-compatibility.
The psuedo-elements do not create new elements in the DOM, and cannot be used to insert markup. They only affect CSS layout. The content is injected after the HTML markup has been parsed. You cannot even use HTML entities like &; you definitely cannot use entire element markup.
Because they only affect CSS layout, pseudo-elements can only exist for elements whose content follows the CSS layout model. That means you cannot have pseudo-elements for:
<img> and <video> elements (the content of the element is replaced by the external file, it does not have a CSS layout model);
<input> and <select> elements (the content is replaced by the form widgets created by the browser, no CSS layout model);
SVG elements (the content is drawn according to SVG rules, not CSS layout).
So there are two reasons why you cannot use pseudoelements to inject your <use> elements: one, pseudoelements don't have an effect on SVG; two, even if they did, pseudoelements can only be used to inject plain text (or complete image files), not markup.
I am moving clarification to the top of this post: When the mouse is not hovering over a certain div, I want elements other than this div to have a red background-color. Can this be achieved with a not() selector as seen in this post? The predicament appears to be that since the certain div is within a body element, the mouse will always be hovering over the body element even when it's over the certain div, thus the body will always have a red background-color.
I am trying to use the not() selector to affect elements when hovering over elements that are not within my selection.
For example:
[data-panel] { background-color:white; }
:not([data-panel=visible]):hover { background-color:red; }
<body>
<div data-panel='visible'>
<div data-panel='visible'>Content</div>
</div>
</body>
My desired outcome is that if the mouse is hovering anywhere besides those divs, the background-color will change to red (i.e. hovering in the body).
However, since those divs are within the body, that selector will always be active. The body will always be red. Is there anyway to style those divs so that this doesn't happen? Maybe something with z-index? Any clues?
What you are trying to do is not possible with CSS alone.
To achieve that effect – let the body turn red on :hover, but not when hovering the panels – you have to cancel the pointer event bubbling on the panels. This is only possible using JS.
BTW, HTML5 has a method to define own attributes: the data-* attributes; e.g. data-panel="visible".
Don't quote your attribute selector.
As already mentioned by James; panel is not a valid HTML5 attribute. You should be taking advantage of HTML5's data-* attributes.
:not([data-panel=visible]):hover {
background-color:red;
}
<div data-panel='visible'>
<div data-panel='visible'>Content</div>
</div>
This of course, affects all elements that don't have the matching attribute, including <body>, which is while your entire page's background will turn red when hovered.
Edit
The predicament appears to be that since the certain div is within a body element, the mouse will always be hovering over the body element even when it's over the certain div, thus the body will always have a red background-color
There is no CSS parent selector, so an event on an element within the body, can't have any say over any styles applied to the body.
I have a text input that is wrapped inside a div. I want to change a css attribute of the :after of the parent div when the input is focused. How can I do this in CSS?
<div class="dataInputTextContainer">
<input class="dataInputText" />
</div>
I tried this but it did not work:
.dataInputText:FOCUS ~ .dataInputTextContainer:after{
background-color: red;
}
Simply put, you cant
(sorry)
CSS works in terms of DOM decendancy, in that rules can only be constructed for elements which appear subsequently in the DOM. As such, you cannot select a parent, or even previous sibling.
What I would tend to suggest is that you sit down, take a step back and work out what you are trying to accomplish. 99% of the time either someone else out there has done it, or you can do it with a minor change to either your CSS or HTML.
Incidentally, a solution would not be to try and style :before or :after on the input, it is a replaced element so such elements do not apply. Why not simply add a label for the input and style it?
If you didn't apply style on :after of the parent but rather put a tag at the same level than the input, you could have used this syntax to apply style of the sibling tag.
This question already has answers here:
What is the difference between HTML div and span elements?
(13 answers)
Closed 9 years ago.
I had a doubt in my mind that what are the differences between these :-
<div> TEXT </div>
<span> TEXT </span>
In simple words div is a block element and span is inline element.
Generally, block-level elements may contain inline elements and other block-level elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.
and inline element
Generally, inline elements may contain only data and other inline elements.
Block Level elements & Inline Elements
<div> is a block element and <span> is a inline element.
These links help you to understand the inline and block elements.
http://www.impressivewebs.com/difference-block-inline-css/
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm
DIV is typically for a block element where as span is an in line element.
So you typically do something like
<p>This word is <span class="blue">blue</span></p>
You should probably not do
<span class="blue">
<div class ="layout">
<p>Content</p>
<img src = "this.jpg" />
</div>
</span>
Now, there is the CSS attribute called display which will allow you to display a div in line (display:inline;) which can cause further confusion since visually it may let you display the same render with either tag. Whether the code is 'correct' or not may or may not mean you get desired results in your browser! Typically, the results probably are what you want but the issue may occur when the site becomes bigger and you then realise something is not right and have to fix it at a later stage!
Any way, W3Schools define it as
The tag is used to group inline-elements in a document.
The tag provides no visual change by itself.
The tag provides a way to add a hook to a part of a text or a part of a document.
Source
And
The tag defines a division or a section in an HTML document.
The tag is used to group block-elements to format them with CSS.
Source
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.