Is it possible to apply a CSS attribute only to a page that contains a substring?

Asked

Viewed 118 times

0

Hello, I’m a beginner in CSS and I’m creating a black theme for the Globo site using Stylish, anyway, I wonder if it is possible to apply an attribute/rule that is only respected within a site that has such a domain or if a substring is detected in the site URL. In this case, for example, I would just like to turn these black fonts into #BFBF for this site that contain "fine-print" in the URL.

Exemplo de página com linhas negras em parêntesis

I don’t know anything about PHP or Javascript, so is it possible to do this using CSS only? I already checked the page Ids and there’s nothing specific for her, so I got lost.

Thank you!

html css

  • My I think your logic that is wrong, it would not be more interesting to put a class in Body and change everything that is inside it than to send a user to another page where depending on the URL will use one . Different CSS...? I’ve never actually seen a Dark Mode that takes the user to another page or that changes the URL...

  • 1

    There is a rule similar to media queries, which is still being proposed and is considered experimental, the @Document, however only works in FF61+ (requires the prefix -Moz), this pq as said, still this in proposed phase, if to use in Chrome/Chromium forget... PS: PHP has nothing to do with Stylish, PHP is a language that ran server-side only.

  • It is that the page of Globo.com has several sub-pages, as Sports, Novels, Society, etc., most of the classes are similar, but some things change due to the layout. Using Stylish with the.com domain I can encompass them all. My only problem is with specifically the page of this novel that turns black inside the parentheses, and if I change, ALL pages will get links (a) with the same color, which I would not like, since usually the color of the globe links are indicators to what type of content you are going to...

  • 1

    @Alecsandercamilo I already quoted in the answer, how to use the regex, see there.

1 answer

5


There is a rule similar to @media (used for various situations including media-query), which is still under proposal and is considered experimental, the @Document, however for normal web pages (not talking about Stylish) only works in Firefox 61+ (requires prefix -moz), this because as I said, still in the proposal phase, if you will use in Chrome/Chromium forget.

However when reading the Stylish documentation:

They claim:

The @-Moz-Document format is the supported format when posting on userstyles.org. The site software Handles Converting to other formats for browsers that do not support it.

That is, within Stylish is functional to support browsers other than Firefox.

Example to apply CSS to an exact URL:

@-moz-document url("/questions/453131/É-possível-aplicar-um-atributo-em-css-apenas-para-uma-página-que-contém-uma-subs") {
    body {
        background-color: black !important;
    }
}

Example to apply CSS to a specific domain, ignoring whether it’s HTTPS or HTTP or the page you’re on:

@-moz-document domain("pt.stackoverflow.com") {

Example to apply CSS to a URL that starts with exactly:

@-moz-document url-prefix("/questions/") {

and in your case the solution will be with regex, something like this:

@-moz-document regexp('://.*\\.globo\\.com/.*fina-estampa.*') {

I won’t be teaching regex, because it’s not something you learn overnight (although some Youtubers and articles and courses say you can learn things like this in a few classes)

If you have a more specific question about regex then learn a little and then ask a question only about regex.

Note that if the URL is this https://gshow.globo.com/novelas/fina-estampa/, the url-prefix would already solve:

@-moz-document url-prefix("https://gshow.globo.com/novelas/fina-estampa/") {
    ... SEU CSS AQUI ...
}

  • Thanks for the answer! The last code worked, although I use Chrome, Stylish has a way to convert. The point is that I would have to do another Section with the url-prefix and as soon as I pasted what you posted it detected @Moz and suggested it to me. It worked out! Thank you very much!

  • 1

    @Alecsandercamilo was what I said in the reply, the Stylish converts (makes it "work").

  • 1

    @Alecsandercamilo edited the answer with an alternative suggestion for other problems nothing related to Stylish and if the answer solved your problem mark it as correct, I am grateful.

  • 1

    I removed the alternative, I got confused, I forgot the head ~ body level, there would be no way to work.

  • Interesting scheme to use url as "selector". I hope you get more support!

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.