How do I inline the :before element when unable to include a CSS/style section?


Tags: css,html5,html-lists

Problem :

I'm looking to style a li element, and would like to modify this CSS property:

li:before {
    color: blue; 
}

However, I am restricted to only using html, inline, styling. I don't have access to the section of the document I'm working on.

Is what I am trying to do, doable, and, if so, how?



Solution :

In CSS, inline styles take precedence over linked CSS files, so you could do something like this with your li elements:-

<li style="color: red;">This is a list item</li>

And it would take precedence over either a linked stylesheet, or an internal stylesheet.

If you're wanting to use more complex selectors, you're out of luck unfortunately.

See: CSS Pseudo-classes with inline styles


    CSS Howto..

    CSS: How to specify a min-width on a table?

    Hide/Show Load function now working

    Hide / show element if text is / isn't to long in jQuery

    How to change Label color in flex Using CSS?

    CSS: How do you keep this Div to the right of a float?

    How to add vendor prefixed gradients to an element with vanilla JavaScript? [duplicate]

    How can I create the behavior of a two-frame horizontal-tiled frameset with divs/css?

    How to break text in a line in a div by css?

    How to hide a segment of my website using PHP

    how to apply vertical-align: middle at div

    making div inside div and put it right-bottom corner how?

    CSS - Absolute position , how to ignore left and top of parent

    How to add only those script and css files necessary to views with partial views [closed]

    how to give css for following data

    How to fit image into table cell by height with CSS (where the height is not defined explicitly)

    Three inline divs: how to make display all three inline OR three block (NOT 2 + 1)?

    Space between list, space on left side of the ul. How to remove this?

    How to make my css webkit animation stop changing

    How does style elements such as “color” in CSS apply to elements like img?

    How do I grey out the default text of a text box?

    How to Style CSS Checkboxes with Font Awesome

    How to use the Xpath and CSS selector in for function

    I was wondering how I would make an image appear when I hover over another image [closed]

    How to prevent randomly positioned images from overlapping using Angular

    How to avoid bootstrap from overriding id-called custom css?

    how can I do this space between tables? [closed]

    change of encoding shows Weird symbols

    How to get “position:fixed” css to work in IE 7+ with TRANSITIONAL doctype?

    How do I vertically center align a position:relative element

    Sencha Touch 2 date picker component & css: how to display hidden column names?