CSS Tricks

Selectors and Properties

Selectors are used to apply styling directly to HTML elements. When starting out in web development, you need to be careful because most selectors will apply to all instances of the same name. This is a positive because that's usually what you want, and if you don't, you can use the appropriate selectors/pseudo-selectors. In addition, some selectors can override others due to specificity, so keep track of the specificity numbers that apply to the main selectors. On the other hand, properties denote what style values you are changing for a selector. I word it like that because the actual value you use is not part of a property; properties are only the name of the style. Some properties have shorthands that combine multiple properties, but keeping them separate allows for better clarity.

Selector Demos

  1. If you need to select the same element that descends from multiple different elements (like li under both ol and ul), :is() can combine those multiple elements.

    2. This p in a span is styled with an :is() selector.

    This p in a code is styled with the same selector.
  2. While parent and child elements are both selected with a :has() selector, the parent is what's being styled. The child is only used to find elements that contain it.
    3. This span has a div inside.
     This span doesn't.
  3. The adjacent sibling selector is used to select elements that immediately follow other elements. It doesn't select the starting element, and it doesn't select elements broken up by other elements.

    4. Starting p not styled.

    Following p styled.

    Separator

    Separated p not styled.

  4. The child selector selects elements directly one level below the parent. More than one level down will not get selected.

    5. Parent p not styled. Child span styled.

    Span inside div not styled.

Property Demos

  1. accent-color does style colors as you might expect, but not for just any elements. It is specific to form elements.
  2. hyphens simply controls allowing words at the end of a max-width to split to the next line instead of moving the entire word to the next line.

    3. You should see a word at the end of this paragraph be hyphenated, like the word hyphenated.

  3. outline is like border with 4 differences: it always covers all sides, it's not included in the box model for positioning, it can't use border-radius, and it isn't always rectangular.

    4. Bordered p

    Outlined p

  4. text-decoration-skip-ink specifies whether an underline (or overline) is overlapped by its text or not.

    5. Skips ink gpy

    Doesn't skip ink gpy

Summary

The possibilities of CSS are probably way more than any one person would use in their lifetime, but they were all added because someone needed a specific style at a certain point. These days, if you need a specific style, it probably already exists. Also, I know there's a lot of HTML errors, but nesting in the ol was the easiest way to go since I still wanted a numbered list but also each demo to go under the respective list item.