Finimalism [Updated for 10.11.X]

[Ted Hinklater]

Ohh I see, I'll use cardText-first (the name under a card)

For a really specific example, let's say you want to change the the color of 

only cardText-first 
in the More Like This section 
of Movies with an Original Foreign Title 

on Desktop and TV (not mobile)
on screens taller than 1000px but not wider than 1000px

In the html it appears like this (I'll bold stuff that is useful)

<div id="similarCollapsible" class="verticalSection detailVerticalSection verticalSection-extrabottompadding emby-scroller-container"> 
<h2 class="sectionTitle sectionTitle-cards padded-right">More Like This</h2>
<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer similarContent animatedScrollX" style="white-space: nowrap; will-change: transform; transition: transform 270ms ease-out; transform: translateX(0px);">
<div data-index="0" data-isfolder="false" data-id="123456" data-type="Movie" data-mediatype="Video" data-prefix="A D" class="card overflowPortraitCard card-hoverable card-withuserdata">
<div class="cardBox cardBox-bottompadded">
<div class="cardScalable">
<div class="cardPadder cardPadder-overflowPortrait lazy-hidden-children"><span class="cardImageIcon material-icons movie" aria-hidden="true"></span></div>
<div class="cardText cardTextCentered cardText-first"><bdi><a href="#/details?id=3891ca0c5821c80929d1ef91e64ce9d5&amp;serverId=123456" data-id="123456" data-serverid="123456" data-type="Movie" data-mediatype="undefined" data-channelid="undefined" data-isfolder="false" class="itemAction textActionButton" title="A Different Man" data-action="link">A Different Man</a></bdi></div>
<div class="cardText cardTextCentered cardText-secondary"><bdi>2024</bdi></div></div></div>

You can target it with .cardText { 
Works but that just targets all the cardtext (first and secondary)

.cardText.cardTextCentered.cardText-first { 
works but that applies to all devices

.layout-desktop .cardText.cardTextCentered.cardText-first { 
works but it only applies to desktop, not TV


.layout-desktop .cardText.cardTextCentered.cardText-first,
.layout-tv .cardText.cardTextCentered.cardText-first { 
works but we want it just for the More Like This section

.layout-desktop #similarCollapsible .cardText.cardTextCentered.cardText-first,
.layout-tv #similarCollapsible .cardText.cardTextCentered.cardText-first { 
works but it targets TV and Music etc, we just want movies

.layout-desktop #similarCollapsible .card.overflowPortraitCard.card-hoverable.card-withuserdata[data-type="Movie"] .cardText.cardTextCentered.cardText-first,
.layout-tv #similarCollapsible .card.overflowPortraitCard.card-hoverable.card-withuserdata[data-type="Movie"] .cardText.cardTextCentered.cardText-first { 
works but we only want it to apply to movies with original (foreign titles)

.layout-desktop .itemDetailPage:has(.originalTitle) #similarCollapsible .card.overflowPortraitCard.card-hoverable.card-withuserdata[data-type="Movie"] .cardText.cardTextCentered.cardText-first,
.layout-tv .itemDetailPage:has(.originalTitle) #similarCollapsible .card.overflowPortraitCard.card-hoverable.card-withuserdata[data-type="Movie"] .cardText.cardTextCentered.cardText-first {
Works but applies to all screen sizes

@media (min-height: 1000px) and (max-width: 1000px) {
.layout-desktop .itemDetailPage:has(.originalTitle) #similarCollapsible .card.overflowPortraitCard.card-hoverable.card-withuserdata[data-type="Movie"] .cardText.cardTextCentered.cardText-first,
.layout-tv .itemDetailPage:has(.originalTitle) #similarCollapsible .card.overflowPortraitCard.card-hoverable.card-withuserdata[data-type="Movie"] .cardText.cardTextCentered.cardText-first {
    color: #f00 !important;
  }
}

...we did it!