How can I change the inline style text color of an element without the ability to add a class or id?


Tags: html,css,inline-styles

Problem :

As I asked in Is it possible in css to give a color name an alternative HEX value? and apparently no one understand what i was asking probably due to my bad way of questioning, I think I should repost the question with some better wording:

There is a website which have codes like the following written in its page as exampled follow:

    <span style="color:red;">+3000</span>
    <span style="color:green;">-2000</span>
    <span style="color:red;">+1500</span>
    <span style="color:red;">+4200</span>
    <span style="color:green;">-100</span>
    <span style="color:black;">+/-0</span>

The above code are written on the original site and i cannot change it or add class/id on to those html tags. But now i want to create a separate CSS stylesheet that make anyone who load the stylesheet would see those plus items (that mark as red in the original code) in green color, and those minus items (that mark as green in the original code) in red color. Can it/How can it be done?



Solution :

You can use the attribute/value selector as follows;

[style*="color:red"] {
    color: green !important;
}

[style*="color:green"] {
    color: red !important;
}

You need to use the !important keyword to avoid the browser using the inline value.


    CSS Howto..

    How to select the first occurrence of an HTML element in CSS that does not have a specific class?

    How to override a display:none property applied to parent element in specific child elements

    How to change CSS with jQuery change and this

    How to change just the css inside a DIV and not anywhere else?

    How to align a div with the right of a table?

    How to write a fallback for css files not loaded, loading too long and blocked? [duplicate]

    How to prevent the scroll of table when click to header on Chrome?

    How to add new table rows and columns with table headers to css table

    How to use Font Awesome 4.x CSS file with JSF? Browser can't find font files

    How to modify a general css using javascript and jquery and return the result as a new id

    attaching div to a specific element for showing with javascript

    How to create a table WITHOUT alternating row colors when using Blueprint CSS framework?

    How to add vertical and horizontal separators between inline elements in CSS?

    How to make one div's height depended of another div's height?

    How to add css to my page via Git Hub raw?

    How can I style a button to look the same as the home button in Google Chrome with CSS? [closed]

    how to create Hollow triangle in css [duplicate]

    How to create a floating mutlicolumn layout in CSS (Flexbox, float, inline-block)?

    How to add padding to anchor tags in Top Bar in Foundation 6?

    How do I import 2 different files icons?

    How to align image with hr line with another image html CSS?

    How to set the jquery draggable with margin left?

    how to show background image(multiple) if out of current div

    How to insert css code in php?

    How to draw a circle sector in CSS?

    How to Trigger css animation both on scrolling down and up

    Customizing ebay store HTML and CSS code (How to?)

    Javascript Slider not showing and Graph tips

    How to change the font-size uniformly?

    CSS Z-Index: How to show element above parent's sibling? (and have cousin above parent)