This question already has answers here:
Does :before not work on img elements?
(16 answers)
Closed 7 years ago.
Trying to make information about image below it. But have A problem... Pseudo element is not visible..
<img info="hey guys" src="http://i024.radikal.ru/1211/4c/809c7c2dfa74.jpg">
<div info="I'm working, but I'm inside the block"></div>
div {
height: 100px;
margin: 10px;
background: yellow;
}
div[info]::after, img[info]::after {
content: attr(info);
display: block;
margin: 3px;
color: black;
font-style: italic;
}
Jsfiddle DEMO
Thanks.
img elements can't have pseudo elements, because they can't have children—::before is inserted within the element. It would look like this:
<img><before></img>
Or at least itt isn't defined by the spec
This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.
Pseudo elements are appended/prepended to the element's contents. Since an <img> (and an <input> for instance) has no contents, it cannot have pseudo elements applied on it.
Related
This question already has answers here:
CSS selector by inline style attribute
(3 answers)
Closed 7 years ago.
I have a div which is set to display: 'none' by the framework our company is using.
<div id="mydiv" style="display: none">...</div>
However when it is shown, it is set to display: block, but I need it to be display: inline-block. So I tried to style the div like this:
#mydiv:not([display='none']) {
display: inline-block !important;
}
But it is not working like I was expecting. I want to achieve this with CSS only. Does somebody know how and if this is possible?
try this example: http://codepen.io/anon/pen/WQZada
Here the attribute to check is style, (not display)
#mydiv[style="display: none"] {
display: inline-block !important;
}
Anyway this is a weak approach, since a change in the markup (e.g. a minification of inline stlye, or an editor change) can affect the style (and viceversa).
Just targeting the element by it's id should be enough to override its inline style:
#mydiv {
display: inline-block !important;
}
<div id="mydiv" style="display: none">Test Div</div>
But
For the sake of the question, regarding to selection an element by its inline style value, you could target the [style] attibute and check for the desired text value
(Trouble is that you'd need to match the exact written form of the style property)
#mydiv[style*="display: none"] {
display: inline-block !important;
}
<div id="mydiv" style="display: none">Test Div</div>
This question already has answers here:
Including another class in SCSS
(6 answers)
Closed 8 years ago.
I have a certain question about applying styles to an element through another CSS class. To be more specific, lets have a look at following. I have div:
<div class="main"></div>
with some styles:
.main {
background: red;
display: inline;
/* some other styles */
}
and I want to apply .another class to the div, but via its .main CSS.
.main {
background: red;
display: inline;
.another
}
.another {
width: 50px;
height: 100px;
}
I assume that a preprocessor (SASS, Compass, etc.) is needed, but can someone advice if this is possible and what to keep in mind?
Thanks
You can assign multiple class to that div. so you can write like this and can apply class.
<div class="main another"></div>
No preprocessor is needed, you can group classes with .class.another, that's the same thing that css preprocessors does.
You can just add multiple classes in html, like <div class="main another and-other">...</div>. In css, you can just group the selectors, the inline order doesn't matter, but it's recommended to use most used class (main) first, and add more specific classes lower. But the order from top to bottom matters, lower in file the selector is, more important it is.
I've created a jsfiddle from your code, take a look. I've added background color so you see the difference, because width and height does not apply to inline elements.
You can merge the two styles like:
.main.another {
background: red;
display: inline;
width: 50px;
height: 100px;
}
This question already has answers here:
CSS :after not adding content to certain elements
(5 answers)
Closed 8 years ago.
Is it possible to append text to images using the ::after pseudo-selector?
img[src="images/interface-zoom-buttons.png"]::after {
content: "these are the zoom buttons";
}
The desire is to use the selector to provide a caption (other styling will be applied to the content of the selector) for images that get used over and over again in multiple HTML documents.
In the above example the image appears correctly and you can see that the appropriate CSS has been applied, but the content (supplied by the selector) is not seen in the output.
An img tag can not have child elements. Because img is a void element and its content model never allows it to have contents under any circumstances.
::after creates a pseudo element as the last child of its parent.
So img::after will not work ultimately because the browser will not allow it based on definition.
What you can do is to contain the img in a container and have ::after on the container.
Demo http://jsfiddle.net/x2za91jw/
HTML
<div class="container">
<img src="http://www.gazette-ariegeoise.fr/IMG/jpg/test.jpg" />
</div>
CSS
.container {
position: relative;
}
.container::after {
position: absolute;
top: 0;
left: 0;
border: 1px solid #000;
content:"these are the zoom buttons";
}
This question already has an answer here:
:before pseudo-class doesn't work with images
(1 answer)
Closed 8 years ago.
I'm trying to put pseudo class after image in html but it doesn't work. That's what I've done:
<img src="image.png" class="item-portfolio" alt="portfolio item">
CSS
.item-portfolio img:after{
content: url(images/shadow.png) no-repeat;
position: absolute;
right: 8px;
top: 0;
}
.item-portfolio p:before{
content: url(images/shadow.png) no-repeat;
display: block;
position: absolute;
left: 6px;
top: 0;
}
Is it posible to set this images after image?
img elements are replaced elements, the HTML spec specifically states:
Note. This specification does not fully define the interaction of
:before and :after with replaced elements (such as IMG in HTML). This
will be defined in more detail in a future specification.
As such, such pseudo elements should not be used for img.
The way of counteracting this is to wrap the image within a parent element, and apply :before/after to that.
More on replaced elements from MDN
In CSS, a replaced element is an element whose representation is
outside the scope of CSS. These are kind of external objects whose
representation is independant of the CSS. Typical replaced elements
are <img>, <object>, <video> or forms element like <textarea>,
<input>. Some elements, like or are replaced elements
only in specific cases. Object inserted using the CSS content
properties are anonymous replaced elements.
SCRIPT
$('img')
.before('<span> Before</span>')
.after('<span> After</span>');
Through Jquery u can insert after and Before
pseudo-elements do not work with img tag
http://www.w3.org/TR/CSS2/generate.html#before-after-content
This question already has answers here:
Is there a CSS selector for elements containing certain text?
(20 answers)
Closed 8 years ago.
I'm trying to find some text inside an element using a css selector, but not include the children of the element. For example:
<div id="information">
This is the text I need
<div>I don't want this text</div>
<span>I also don't want this</span>
</div>
Any ideas?
NOTE: I'm parsing a page so I don't have control over the elements
Apparently not possible using CSS Selectors. With XPath though, if someone is interested:
//div[#id='information']/text()
So you want the loose text inside of #information but you don't want the div and the span? Seems quite simple:
#information {
/* property values */
}
#information > div {
display: none; /* removes content of child div */
}
#information > span {
display: none; /* removes content of child span */
}
I guess you don't really even have to use the child (>) selector, too.
There is no CSS selector to select just the text content of an element. There is nothing illogical about the idea (CSS could have a pseudo-element for the purpose), but currently there is no specification or even draft on such matters.
What you can do is to set styles on an element and then override them on any child element, possibly using a selector like #information * that matches all descendant elements or #information > * that matches all child elements.