02 Research and Documentation - CSS Tricks Alamanac

Define/Explain Selectors and Properties

Selectors are one of the critical components of CSS and connect the style with what HTML element is meant to be styled. Much like if I wanted my partner, Garret, to color certain parts of a chainsaw carving dark green, the selector would be telling him which part of the chainsaw carving to color dark green. For example, if I wanted the dragon’s body to be green, I would share, “Paint the body of the dragon dark green.” The selector is “body of the dragon”. In CSS, there are different kinds of selectors, such as element selectors, ID selectors, class selectors, and universal selectors. There is also pseudo-selectors, such as every element having a ::before and ::after pseudo-element that can styled. Once a selector is coded, then a property along with the styling of that property is coded. Properties determine how a particular selector is being styled. In my previous example, the property would be color.

Document and Demo Four Selectors

  1. The selector :is(): :is(h1, h2) {color: blue;} - this will change the h1 and h2 text in the body element to the color blue.
  2. The selector :has(): .section-wrapper:has(ol + p) {background-color: papayawhip;} - this will change the background color of a section that contains a paragraph after an ordered list.
  3. The selector ::after: section h2::after {content: " by Jessi Wendlandt"; color: black; font-size: 18px; line-height: 1.5;} - this will place whatever is the content after the H2 in the section element.
  4. The selector :last-of-type: .section-wrapper ol li:last-of-type {font-style: italic;} - this will change the font style for the last ol li item within the section.

References: :is(), :has(), ::after, :last-of-type

Document and Demo Four Properties

  1. The property list-style-type: ol li {list-style-type: square;} - this will change the style of the bullet on an li within an ol.
  2. The property rotate: footer a {rotate: 1deg;} - this will rotate the footer a elements one degree in a clock-wise direction.
  3. The property initial letter: .first-letter::first-letter {initial-letter: 2;} - this will have the first letter of the element that has the class name "first-letter" to take up two spaces.
  4. The property transition: footer a:hover {background-color: #7a5200; transition: background-color 0.5s ease-in;} - this will slowly change the background color of the footer a element to the color with the hex value, #7a5200.

References: list-style-type, rotate, initial-letter, transition

Summary

The CSS Tricks Alamanac is a very handy tool to understanding what CSS selectors and properties you could choose from for different HTML elements. I found it helpful to challenge myself to try newer ones I have not tried before that I have been a bit intimidated by in the past. When trying the intital-letter property, I needed to use another resource as well since I could not get it to work. Once I added the ::first-letter pseudo-selector into the CSS, then it worked!