Is there a CSS selector to target elements with inline styles? So can I target the first span but not the 2nd with CSS only?
If not, can this be done with jQuery?
http://jsfiddle.net/TYCNE/
<p style="text-align: center;">
<span>target</span>
</p>
<p>
<span>not target</span>
</p>
A bit late to the tea party but thought I would share the solution I found & use.
#simone's answer is perfect if you can match the style attribute exactly. However, if you need to target an inline style attribute that may have other inline styles associated with it you can use:
p[style*="text-align:center;"]
"*=" means "match the following value anywhere in the attribute
value."
For further reference or more detailed information on other selectors see this blog post on css-tricks.com:
The Skinny On CSS Selectors
http://css-tricks.com/attribute-selectors/#rel-anywhere
p[style="text-align: center;"] {
color: red;
}
However this is ugly.
If you would like to apply styles to a particular rule declaration you can also use style*. This will match all elements that have the inline style, regardless of the value applied.
div[style*="background-image"] {
background-size: cover;
background-repeat: no-repeat;
}
use :
p[style] span {
color: red;
}
Related
my website scraped information from ebay products and for the description of the product I get all html. Product description has inline styles and when I open the description of the product in my website, products css ovewrite my css
Normal:
And after I opened the product description
Here is anchor style from developer tool
So I need any idea how to separete ebay product css with my css.
One of the methods that I think is to add !important to all my styles, but I don't think this solution is elegant and I want something else. So If you have any suggestion how to solve my issue I will appreciate them.
Perhaps you need to update your css to be more specific with it's selector, for example if you have a HTML structure which diferentiate the container of the Product Description from eBay like this
.leftbar {
float: left;
width: 20%;
background: #ccc;
}
a { /*think of this as default link style*/
color: black;
}
#main div:not(.product-desc) a { /*more specific selector*/
display: block;
color: red;
}
a { /*this one is from eBay*/
color: green;
}
<div id='main'>
<div class='leftbar'>
<a>Hello</a>
<a>World</a>
</div>
<div class='product-desc'>
<a>Description</a>
<a>Product</a>
</div>
</div>
You can use a :not selector to define your main style so it won't be disrupted by the eBay style
The more specific your selector is, then your style will be used. But if your selector is the same, then the last rule from top bottom will be applied. So in the above example, the link inside product-desc color is set to green not black
create a custom inline CSS property that you desire in the element to overwrite the default CSS. here is how you create inline CSS for overwriting anchor properties.
Here how you do:
create the icons/text of anchor inside a element and give inline CSS
<a href="http://www.example.com" target="_blank">
<span style="color: #ffffff !important;" >icons</span>
</a>
A quick test in Chrome shows that the
a:visited * { ... !important}
does override the inline style, but adding the !important back to the span works fine.
<span style="color: #ffffff !important;" >
For understanding it better. Learn here Overwriting Hover in anchor
Overwriting visited in anchor
Blockquote
If you want to remove all exist style and reset it to default you can use:
all: initial;
I'm making an HTML email signature with inline CSS (i.e. CSS in style attributes), and I am curious as to whether it's possible to use the :before and :after pseudo-elements.
If so, how would I implement something like this with inline CSS?
td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }
You can't specify inline styles for pseudo-elements.
This is because pseudo-elements, like pseudo-classes (see my answer to this other question), are defined in CSS using selectors as abstractions of the document tree that can't be expressed in HTML. An inline style attribute, on the other hand, is specified within HTML for a particular element.
Since inline styles can only occur in HTML, they will only apply to the HTML element that they're defined on, and not to any pseudo-elements it generates.
As an aside, the main difference between pseudo-elements and pseudo-classes in this aspect is that properties that are inherited by default will be inherited by :before and :after from the generating element, whereas pseudo-class styles just don't apply at all. In your case, for example, if you place text-align: justify in an inline style attribute for a td element, it will be inherited by td:after. The caveat is that you can't declare td:after with the inline style attribute; you must do it in the stylesheet.
as mentioned above: its not possible to call a css pseudo-class / -element inline.
what i now did, is:
give your element a unique identifier, f.ex. an id or a unique class.
and write a fitting <style> element
<style>#id29:before { content: "*";}</style>
<article id="id29">
<!-- something -->
</article>
fugly, but what inline css isnt..?
You can use the data in inline
<style>
td { text-align: justify; }
td:after { content: attr(data-content); display: inline-block; width: 100%; }
</style>
<table><tr><td data-content="post"></td></tr></table>
You can't create pseudo elements in inline css.
However, if you can create a pseudo element in a stylesheet, then there's a way to style it inline by setting an inline style to its parent element, and then using inherit keyword to style the pseudo element, like this:
<parent style="background-image:url(path/to/file); background-size:0px;"></p>
<style>
parent:before{
content:'';
background-image:inherit;
(other)
}
</style>
sometimes this can be handy.
No you cant target the pseudo-classes or pseudo-elements in inline-css as David Thomas said.
For more details see this answer by BoltClock about Pseudo-classes
No. The style attribute only defines style properties for a given
HTML element. Pseudo-classes are a member of the family of selectors,
which don't occur in the attribute .....
We can also write use same for the pseudo-elements
No. The style attribute only defines style properties for a given
HTML element. Pseudo-classes and pseudo-elements the are a member of the family of selectors, which don't occur in the attribute so you cant style them inline.
Yes it's possible, just add inline styles for the element which you adding after or before, Example
<style>
.horizontalProgress:after { width: 45%; }
</style><!-- Change Value from Here -->
<div class="horizontalProgress"></div>
As mentioned before, you can't use inline elements for styling pseudo classes. Before and after pseudo classes are states of elements, not actual elements. You could only possibly use
JavaScript for this.
If you have control over the HTML then you could add a real element instead of a pseudo one.
:before and :after pseudo elements are rendered right after the open tag or right before the close tag.
The inline equivalent for this css
td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }
Would be something like this:
<table>
<tr>
<td style="text-align: justify;">
TD Content
<span class="inline_td_after" style="display: inline-block; width: 100%;"></span>
</td>
</tr>
</table>
Keep in mind; Your "real" before and after elements and anything with inline css will greatly increase the size of your pages and ignore page load optimizations that external css and pseudo elements make possible.
you can use
parent.style.setProperty("--padding-top", (height*100/width).toFixed(2)+"%");
in css
el:after{
....
padding-top:var(--padding-top, 0px);
}
EDITED: If you have access to the stylesheet, you can pass the variable values inline and then, in your stylesheet, use the inherit value for the pseudo-element property you want to manipulate:
HTML
<div style="color: whitesmoke;">
</div>
CSS
div::before {
content: '';
color: inherit;
}
Useful for background images for example.
Is there any way by which i can replace the image mentioned in SRC attribute of image tab using any of css trick ?
<img src = "setting-icon.png"></img>
i want to replace the setting-icon.png with css property, I am able to put another image in background with background-image property of image tag but i need to hid the one mentioned in src and show what the one i mention in background-image property in css.
Yes this is weird requirement but the thing is i am doing customization in a third party application where i only have control over css, I can not modify the HTML tags.
thanks for reading through !
You can use content:url("image.jpg")
https://developer.mozilla.org/en-US/docs/Web/CSS/content
In your CSS,
.img {
content:url("/new/image/source.png");
}
If you cannot modify HTML,
img {
content:url("/new/image/source.png");
}
In HTML,
<img class="img"/>
I have not try this yet, but I not sure if the inline attribute src will overweight the CSS content.
Update
It should work if you already have src for your img element. Thanks #pol
You can't change the html attributes values with CSS, only javascript.
But, with CSS you can "hide" the image and put a background in its place.
div img {
height: 0;
width: 0;
padding-top: 175px;
padding-left: 280px;
background-image: url("http://www.planwallpaper.com/static/cache/6f/82/6f8200c95d588fde83d1f212f674611a.jpg");
}
<img src="http://www.planwallpaper.com/static/cache/a1/4e/a14e880ef245c3d159ba96ebbeb4c8c3.jpg">
<div>Changed img:</div>
<div><img src="http://www.planwallpaper.com/static/cache/a1/4e/a14e880ef245c3d159ba96ebbeb4c8c3.jpg"></div>
Good question to learn about unnoticed selectors using CSS,
Additionally, You can read more about other selectors,
For example:
img: hover {}
and some other nice selectors for different range of elements
:active
:after
:before
:first-child
:first-letter
:first-line
:focus
:hover
:lang
:link
:visited
You can even conditionally select like this:
img[src="setting-icon.png"] {
border: 1px solid #000000;
content:url("/new/image/source.png");
}
Reference: W3.org - Advanced Selectors
I am trying to apply a hover effect on a div. Why isn't this working at all?
My Html looks like this:
<a href="#panel-866" id="panel-866">
<div class="application-icon" style="background-image: url('/custom-icon-off.png')">
</div>
</a>
CSS
.tab-title > #panel-866 .application-icon:hover {
background-image:url(/custom-icon-hover.png);
}
You need to override the inline styles, which have higher specificity than external / embedded styles.
Try this:
#panel-866 > .application-icon:hover {
background-image:url('/custom-icon-hover.png') !important;
}
Here's a demo: https://jsfiddle.net/0aghvn3u/
The '>' - selector gets direct descendants, maybe just remove
.tab-title >
and it will work. Difficult to say without knowing your markup since its a simple task and your solution seems to be correct.
Make it important so it overrides the anchor tag's default hover styles.
.tab-title > #panel-866 .application-icon:hover {
background-image:url('/custom-icon-hover.png') !important;
}
There are a few problems with your code, so it's hard to say what specifically is causing the problem. You have a div element in an a tag, which you should avoid because block level elements don't work well within inline elements. This is likely not the problem, though.
I've added some markup and removed some CSS that included a selector not in the code you presented here that might have caused the effect not to work:
<a href="#panel-866" id="panel-866">
<span class="application-icon" style="background-image: url('http://lorempixel.com/400/400')">
</span>
</a>
and
#panel-866 .application-icon {
height: 400px;
width: 400px;
display: block;
}
#panel-866 .application-icon:hover {
background-image: url(http://lorempixel.com/200/400) !important;
}
Notice I made the inline span element display:block (this is technically "allowed") so I could give it a width and height. Even when on a div element, background images need a width and height to display.
Secondly, as the other posters mentioned, adding an !important declaration to your :hover style rule is needed because browsers will always override internal or external style rules with inline ones.
https://jsfiddle.net/3b2ywp5b/
I write a html element as below ::
<div class="box"> Foo box </div>
and write css like
.box {
width: 400px;
height: 40px;
color: red;
text-align: center;
}
or
div.box {
width: 400px;
height: 40px;
color: red;
text-align: center;
}
I want to ask that how the both css for box class is different than each other.
The difference is that in the first class you tell that all element (div, p, span ...) with class box have that attribute.
Like this:
<span class="box">test</span>
<div class="box">test</div>
<p class="box">test</p>
The second class means that only div with class box has that attribute
Only this elements get second class:
<div class="box">test</div>
The selector before the class specify which type of elements can take this class
One very important difference between div.box and simply .box is in something called selector specificity. It is a set of rules which defines which selector gets more weight once the browser starts going through all the selectors that potentially have influence on a particular element.
What this means is easily demonstrated in the following example (DEMO)
We have a simple div containing some text.
<div class="box">
Zarro boogs found!
</div>
Now we add some CSS selectors to the example.
div.box {
padding:0.8em;
background: #bd0000;
color: #fff;
}
.box {
color: #bd0000;
}
One of the most basic rules of CSS is that selectors can be redefined in a way that whatever definition comes last and has influence on a particular element its the one that is going to be used (the sole exception being when using !important which always takes precedence).
Now in the above example redefining the .box class selector should actually hide the text but instead its still visible. How is that possible if we said that latter rules always take precedence? Its because the div.box rule has a higher specificity that .box since it actually gets points for containing both an element (div) and a class selector (.box) in its selector declaration (div.box).
Of course the div.box rule will be applied only on a div element but since class selectors are often reusable pieces of code there is plenty of situations when they are used on divs.
Although the rules in the official W3 specification are not that hard to understand they are sometimes pretty hard to remember. That's why I would like to recommend an excellent article on CSS selector specificity which can be found here.
In my opinion selector specificity is by far the most important thing to master when it comes to tracing inheritance problems with CSS stylesheets.
.box means any element having class box.
Example:
<div class="box">...</div>
<section class="box">...</section>
<span class="box">...</span>
div.box means only div element having class box.
Example:
<div class="box">...</div>