Actions

Work Header

Rating:
Archive Warning:
Fandoms:
Additional Tags:
Language:
English
Series:
Part 6 of AO3 Skins, Part 3 of :has() selector
Stats:
Published:
2023-04-05
Words:
445
Chapters:
1/1
Comments:
10
Kudos:
24
Bookmarks:
14
Hits:
1,192

Permafiltering for first relationship tagged

Summary:

Figured it out. Nice and simple!

Work Text:

Alright, you know the drill with these by now.  This uses some experimental/really recent change to CSS to make it work.  Check the beginning of my work on how to filter by the number of tags per tag type for how to test that these specific new CSS changes have rolled out for your browser of choice yet. 

Anyways, here is the basic code

.blurb:has(li:nth-child(1 of .relationships) > a[href="URL"])
{
display: none !important;
}

Switch out the "URL" with the link info like you do for the permablocking tags site skin for whatever relationship you don't want to be first.  So if I wanted to hide all works where Barry/Larry is the first relationship, I would use this code

.blurb:has(li:nth-child(1 of .relationships) > a[href="/tags/Barry*s*Larry/works"])
{
display: none !important;
}

Conversely, if you wanted only works where Barry/Larry is tagged first, you would add a :not() around it like so

.blurb:not(:has(li:nth-child(1 of .relationships) > a[href="/tags/Barry*s*Larry/works"]))
{
display: none !important;
}

UPDATE!

As a commenter pointed out, doing it that way wiped out some things I wasn't meant to. The new code should be updated to be like this

.blurb.work:not(:has(li:nth-child(1 of .relationships) > a[href="/tags/Barry*s*Larry/works"]))
{
display: none !important;
}

The only issue with that change is that it won't apply to bookmarks anymore. If you want it to also apply to bookmarks, copy your code and change the new .blurb.work to .blurb.bookmark like this

.blurb.bookmark:not(:has(li:nth-child(1 of .relationships) > a[href="/tags/Barry*s*Larry/works"]))
{
display: none !important;
}

This is only really an issue when youbhave the :not() modifier

*End Update*

You can of course also combine this with the :is() operator to make things cleaner in some cases.  Let's say you read 3 fandoms and only 1 relationship in each fandom, Barry/Larry, Penny/Penelope, and Leroy/Ginevra. You wouldn't want to use the previous code unless you wanted to switch between skins for each fandom.  Instead you can use the :is() to select if it has one of those 3 like so

.blurb.work:not(:has(li:nth-child(1 of .relationships) > a:is([href="/tags/Barry*s*Larry/works"], [href="/tags/Penny*s*Penelope/works"], [href="/tags/Leroy*s*Ginevra/works"])))
{
display: none !important;
}

You can also do this with other types of tags if you wanted and had some use case there by changing the .relationships to another type of tag, I'm just not sure what that use case would really be.  

Anyways, hope this helps somebody!

Series this work belongs to: