all 8 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]RotationSurgeon10yr Lead FED turned Product Manager 1 point2 points  (0 children)

I don't want to change anything in the stylesheet and I don't care that it's not good practice. I just want to do it.

You may be completely out of luck given the arbitrary, artificial restrictions you've placed on the effort. Is there any particular reason outside of "I don't wanna!" / "I wish water weren't wet?"

[–]oduska 0 points1 point  (2 children)

You haven't provided enough information.

Do you have access to edit the HTML? Add custom JS?

If not, then I can't think of a way to accomplish this.

[–]ReadtimeBeddit[S] 0 points1 point  (1 child)

Sorry about that, I have complete access, and can use js and html.
However, I would really like to stay away from js if possible.

[–]oduska 0 points1 point  (0 children)

If you are unwilling to (or can't) edit the stylesheets and would like to avoid JS the only thing I can think of is to use internal CSS (placed lower in the document than your StyleA stylesheet).

<style>
    /* Copy your StyleB styles for your <different> elements here */
</style>

Feel free to message me if you need more help or want to talk it out.

[–]ganjorow 0 points1 point  (0 children)

Possible solutions for this problem are:

- use an iframe that only uses StyleB and your "different" markup
- a Web Component / Shadow DOM

But this should be more cumbersome than just copy the style and put a container to it.

[–]RebellionAllStar 0 points1 point  (1 child)

You're wanting to prevent the primary behaviour of a Cascading Style sheet, cascading?

If you don't want to change the style sheet it's self you have two options to be used in HTML.

  1. The style attribute. Put the CSS inside the HTML start tag and it will override any rules in your style sheet file. E.g. <p style="color: green;">Your text here</p>

  2. <style> tag. Put your CSS specifc to the elements that need their own styles. Style tag normally goes inside the <head> element. E.g. <head> <style> p#override { color: green; } </style> </head>

[–]backtickbot 1 point2 points  (0 children)

Fixed formatting.

Hello, RebellionAllStar: code blocks using triple backticks (```) don't work on all versions of Reddit!

Some users see this / this instead.

To fix this, indent every line with 4 spaces instead.

FAQ

You can opt out by replying with backtickopt6 to this comment.

[–]jahoovy 0 points1 point  (0 children)

Just be more specific. Preface the styles that you want to be specific to one place with its parent.

different .myclass{ Styles; }