css selector question

[pihentagy]

Hi all!

I have a question about css selectors:

I like serif fonts, so I'd started to write a custom style which changes every fonts on every webpage to serif.

However there are some exceptions, notably:

• code blocks
• icon fonts

I can override all fonts like this:

body :not(code):not(pre) {font-family: serif !important;}

but what should really there is to set font to serif for all places except pre and code tags and all descendants. So how can I "not touch" those pre and code tags and their children?

Thanks

[vednoc]

I'd started to write a custom style which changes every fonts on every webpage to serif

Since I also prefer serif fonts, I made the following userstyle for my own use. It uses Stylus-lang preprocessor in order for code to be more documented, extendable, and maintainable in the long run.

/* ==UserStyle==
@name           Global serif font
@namespace      www
@version        1.0.0
@description    Apply your favorite serif font globally.
@author         vednoc
@preprocessor   stylus
@var text font  'Serif font' '"your favorite serif font"'
==/UserStyle== */

@-moz-document regexp("https?://.*") {
    i = !important

    // Exclude default code areas.
    n ?= ':not(code):not(pre):not(pre > span):not(code > span)'

    // Exclude icon fonts.
    n += ':not([class^="fa"]):not(.i)'

    // Exclude code areas on GitHub.
    n += ':not([class^="blob-"]):not([class^="blob-"] > span)'

    // Exclude code areas on GitLab.
    n += ':not(.diff-line-num):not(pre > code > span span)'

    // Exclude utility classes for fonts.
    n += ':not(.monospace):not(.text-mono)'

    // Generate.
    { n } {
        font-family: font, serif i
    }
}

For more information, check wiki pages on how to install it and then customize it if you've never used UserCSS format until now.

So how can I "not touch" those pre and code tags and their children?

As far as I know, this is the only way to do it.

:not(pre):not(pre *):not(code):not(code *) { ... }

[pihentagy]

Is that snippet hosted somewhere?

May I suggest to exclude also input boxes and textarea? (I prefer monospace in plaintext/markdown input)

[vednoc]

Not at the moment, but I could make a repository for it. As for excluding input areas, that could be done conditionally thanks to Stylus-lang, so that we can have both.

[pihentagy]

Unfortunately the gitlab part seems not to work for me on gitlab-ce-13.10.3 nor on gitlab.com, say for eg. here: https://gitlab.com/herecura/packages/vivaldi-snapshot/-/commit/84ae3caf69cd5c6b0fad8a627ba333b3c7fc6cb5

[vednoc]

GitLab can be quite inconsistent with their styles. I fixed that and added a few more things. Also, I just made a repository, so feel free to report issues here: https://github.com/vednoc/custom-fonts

[pihentagy]

A million thanks!