Apply different styles based on a condition?

[vanowm]

Hello.
I might be missing something, but is there a way apply different style based on page condition - such as weather browsing as a guest or logged in as a member?

Unfortunately the part of the page that has such information is totally separate from the part I want to change style, therefore pure css is not possible. So I wondered if stylish allows use some kind of conditional tricks for this kind of situation?

Thank you.

P.S.
trying have different style for guests and members in this userstyle:
https://userstyles.org/styles/139743/potplayer-forum-breadcrumbs

[yfdyh000]

Tried the https://www.w3schools.com/css/css_attribute_selectors.asp?

[vanowm]

I don't think pure css allows selections that are not directly related to each other. For example:

<div id="div1">
  <div id="div1.1">
    <div id="div1.2"></div>
  </div>
</div>
<div id="div2">
  <div id="div2.1"></div>
</div>

can you apply style on #div2.1 based on attribute of #div1.2? I don't think you can...

[jep-dev]

You can't, unless they share an attribute, or descend from parents that share the attribute. The 'parent' selector is omitted, I believe due to the DOM being an directed acyclic graph, which has benefits that outweigh arbitrary traversal selectors.

Outside of the scope of pure Stylish...

If you are the author, you can apply classes liberally, add attributes closer to :root, or circumvent the limitations by flattening the tree and emulated the layout structure from CSS (which has the added benefit of arbitrary layout overrides from styles/themes/skins, since the hierarchy is all virtual.) If you're not the author, the only way I know is through Javascript; with JS you have basically limitless control over attributes, styles, etc. You have the option to tweak just enough to enable your selectors, but you might as well use it to import different styles post-hoc. You can also URL-encode your stylesheet the same way Stylish does, but tune it with regex substitutions based on the information in the page.

A little trick of mine is to bookmark a javascript snippet and click it to apply it to the current page. You need a workaround to get it to work in the FF url bar: instead of javascript:alert("Hi"), you would write javascript:var a = function(){ alert("Hi"); }(). I recommend using the web console to write your script before converting it to a one-liner to bookmark. There are plugins that apply both stylesheets and scripts the same way Stylish does, and others designed for automatic redirection that can "redirect" to your snippet, effectively running the script on the same page. Javascript devs will likely know more about elegant solutions, as opposed to the handful of kludges I've found.

Edit -- additional Javascript method:

javascript: var a=function(){$('head').append('<style> * { color: red !important; } </style>')}()

Create multiple versions of a stylesheet and inject the one you want, either by manually selecting the corresponding bookmarked JS, or by writing the conditional logic in the body of the function. Again, you can tailor the styles or parametrize them and filter them from the script. I tried injecting a <link> to a local file, but that didn't work, even prefixed with the file: protocol and an absolute path. I imagine there's a workaround, potentially by opening the file and injecting the contents, but I'm not that experienced with JS in general.