CODEWITHSUNDEEP
javascriptcss
J. G.
J. G.

Reputation: 3

Add JavaScript to CSS

I'm trying to target a specific piece of code via CSS. I do not have the ability to target the html code itself. I know I can change the color of font in particular pages if they have separate id's defined, but I ran into an instance where both pages are using the same id. For example,

Page 1:

<div class=text-grey-mid id=loading-wrap-container>This is page 1</div>

Page 2:

<div class=text-grey-mid id=loading-wrap-container>This is page 2</div>

If I try to use CSS to change the font color of one page, it will affect both pages.

div#loading-wrap-container .text-grey-mid { color: green; }

So, could I instead use JavaScript in the CSS page to make sure this color change only works on one page and not another? Or is there a better way to do this? Keep in mind I only have access to the CSS page to affect changes.

Edit: If the parent on page 1 has a unique class defined as "language", I can use CSS entry as follows to only change the font color on page 1:
.language .text-grey-mid { color: green; }

Thank you all for your help!

Upvotes: 0

Views: 96

Answers (2)

Mario Cianciolo
Mario Cianciolo

Reputation: 1261

You could use JavaScript, to gather unique information about the page, like title or URL, and apply styles accordingly.
Note that you cannot inject JS code in a CSS file, you need to add a <script> tag into your page, it's simply not possible to run JS within CSS as it would get interpreted as (invalid) CSS.

Otherwise, you can select a HTML element by specifying any of its ancestors. Are the whole pages identical? Or there is an element that differs? You could use that element to discriminate between the two pages.
This is the only option if you have to use CSS only.

Upvotes: 0

Daniel P
Daniel P

Reputation: 3374

Look for a unique id, class or tag (or any unique combination) up in the hierarchy and use that as part of the CSS selector.

You cannot use JavaScript in CSS.

Upvotes: 4

Related Questions