CODEWITHSUNDEEP
javascriptjqueryhtmlcss
scientiffic
scientiffic

Reputation: 9415

Applying Styling to :before Element Dynamically

I need to add styling to a before: element dynamically.

On my page, I have the following container

<p class="stepNode 203"></p>

I dynamically added styling to the page to set a background image to this element:

  $('head').append('<style> .stepNode.'+node_id+':before {background: url("'+$(divs[k]).data('image')+'");}</style>');

produces:

<style>
 .stepNode.203:before {background: url("http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg");}
</style>

But upon inspecting the element, this styling is never applied.

Notably, when I change the style to exclude the numerical class, the background is applied properly:

<style>
 .stepNode:before {background: url("http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg");}
</style>

Any ideas how to fix this problem? Do I need to do anything to reapply a style if it's added dynamically?

Upvotes: 1

Views: 54

Answers (3)

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15767

203 is not valid css class name,

class names should start with a letter

All CSS syntax is case-insensitive within the ASCII range (i.e., [a-z] and [A-Z] are equivalent), except for parts that are not under the control of CSS. For example, the case-sensitivity of values of the HTML attributes "id" and "class", of font names, and of URIs lies outside the scope of this specification. Note in particular that element names are case-insensitive in HTML, but case-sensitive in XML.

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

refer http://www.w3.org/TR/CSS2/syndata.html#characters

, try changing it to stepNode-203 or stepNode_203 like that.

Upvotes: 2

Mooseman
Mooseman

Reputation: 18891

CSS class names must not start with a digit. The classes 203 and -203 are invalid, but _203 is a valid alternative.

Quoting from the spec:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit.

Upvotes: 3

scientiffic
scientiffic

Reputation: 9415

I guess that you can't have classes that are integers! I changed my class name to step_203 instead of 203, and I was able to get my code to work.

Upvotes: 0

Related Questions