Skip to content

Instantly share code, notes, and snippets.

@ola-dola

ola-dola/css-hacks.md

Last active August 29, 2020 01:17
Show Gist options
  • Save ola-dola/9560e102f1c78bdfbf1b91712c38a6e8 to your computer and use it in GitHub Desktop.
Save ola-dola/9560e102f1c78bdfbf1b91712c38a6e8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
css-hacks.md

css

CSS makes my head hurt most times. But sometimes, it hurts for long enough(like today,11/8/2020), I start to grok some of its interesting powers. This will be a living document I update on days like this.

  • You can target a grandchild or great-grandchildren with &>tag(child)>tag(grandchild)...>tag(nth-great-grandchild).

  • TIL about dl tag(Description List). It's like a a ul, but for key-value pairs, or data relating to that.

  • Flexbox: just-cont: flex-start, on an item: margin-left: auto. Splits the into two far ends starting at the item. Good for navs, esp.

  • If there's horizontal scroll bar and you can't figure out which element is causing it: Devtools -> new style rule(+ sign to the top right corner on chrome) -> * { outline: 1px solid red }. Easily shows.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment