Luke, rambling…

Search

SearchSearch

CSS

Jan 03, 2023, 2 min read

  • try to find a locally-viable specificity

  • target something more broad and then narrow it down

  • .foo .bar {} would be a selector for any .bar that is any level of descendant of a .foo

    • so even if i have .bar like nineteen layers deep inside of .foo, it will still select it
    • that can be a problem is if you are using very broad things, but if the page (or in this case the app) uses precise classes and attributes, then it shouldn’t really matter too much

  • Obsidian example: custom callouts

    • if you wanted to do something special to just the title, you could target the callout header like so: div[data-callout="custom"] .callout-title
      • problem: if you nest callouts, you might accidentally cause some things to happen with a callout nested inside your custom callout
      • immediate child: only apply to a .callout-title that is an immediate child of your custom callout using the > operator
        • div[data-callout-"custom"] > .callout-title

  • square brackets are an attribute selector

    • if you are looking at a tag in HTML and it looks something like <div class="meme" ice-cream="strawberry">
    • the ice-cream="strawberry" is an attribute of that element
      • [ice-cream] means it will select for elements that have the attribute (regardless of the value)
      • [ice-cream=“strawberry”] will only look for elements that have the attribute and where that attribute’s value is “strawberry”

  • Sometimes it’s good to be excessively specific if you feel that you might accidentally change another class of the same name elsewhere in the app.

Ressourcen

Graph View

Backlinks

  • No backlinks found