CSS

The things that made me go “What?!”

When first working with CSS there were a few things that looked a tiny bit intimidating. I wanted to conquer these so I put together a little cheat sheet below that I can reference in the future, I hope it helps you too.

Descendant Selector (space)

ul li p { color: blue;}
  • Separated by a spaces
  • Selects all element of the element type listed.
  • Note: it will select p elements nested even further down the chain than listed., i.e, the grandchildren and great-grandchildren.
  • This example has a train of 3 elements, typically if you have more 4 or more elements it may be better choice to organize your page differently.

Child Selector (>)

  • Separated by a greater than sign ‘>’
  • Applies to only all direct immediate children (not grandchildren also like a Descendant selector can).
.child > li { list-style: none; }

Adjacent Selector (+)

  • Selects all <p> elements that are placed immediately after <div> elements. I.e., the first neighbor after each <p> element.
.adjacent + p { color: green; }

All Adjacent Selectors (~)

  • Selects every <p> element that are preceded by a .class element
.adjacent ~ p { color: green; }

Attribute Selectors

When we need to dig inside of a selector to its attributes we can use these attributes selectors. Notice these are surrounded by square brackets.

Any attribute with the specific property example: [attribute=”value”]

Attributes relating to a specific selector, in this case the <a> tag: a[href=”value”]

=

  • [type=”value”] selects all elements with the exact match of the string

~=

  • ~[class~=”value”] selects all elements that contain the exact word of the string

^=

  • a[href^=”value”] selects all ‘a’ elements that start with the substring

$=

  • [attribute$=”value”] selects all elements that end with the substring

*=

  • a[href*=”value”] selects all elements that contain any part of the string

i

  • a[href^=”http” i] begins with the substring and makes it case insensitive

Pseudo Class Selectors

  • .wrapper p:first-child {} Selects every <p> element that is the first child of .wrapper
  • .wrapper p:last-child {} Selects every <p> element that is the last child of .wrapper
  • .wrapper p:nth-child(odd) {} Selects every <p> element that is an odd child of .wrapper (odd can be replaced with even.
  • .wrapper p:nth-child(3) {} Selects every <p> element that is the 3rd child of .wrapper
  • li: only-child {} Selects every <li> element that is the only child of its parent
  • p: empty{} Sets styling only when the element is empty (has no children or text)

Pseudo Element Selectors

  • my_div::first-letter {} adds styling to first letter of the div element
  • my_div::first-line {} adds styling to the first line of the div element
  • .story::before {} adds styling or content directly before the div element starts
.story::before {
content: "The story begins here, hello.";
color: blue;
border-bottom: 5px;
}
  • .story::after {} adds styling or content directly after the div element ends
.story::after {
content: "The story ends here, good-bye.";
color: blue;
border-top: 5px;
}
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.