2R CSS Tricks Alamanac

Define Selectors and Properties

Selectors tell CSS what elements to style. Properties tell CSS what to change about the element that the selector refers to.

Selectors

  1. :root

    Since in the assignment for Module 2 we were required to use custom properties using the :root selector I thought it would be a good one to research a little further. According to CSS-Tricks Alamanac, using the :root selector is essentialy the same as using the html selector since the :root selector simply selects the highest level parent element, which in an HTML document the html element is always the highest parent. So why style using :root instead of html? Well a basic html selector has lower specificity than the :root pseudo-class selector. So if you truly want your style to be at the top of the tree, a class is higher than a basic selector. Yes even the selector for the top element in the hierarchy.

  2. ::selection

    This one is kinda cool. The ::selection selector styles the selection pseudo-element. If a user selects text on your page, you can change the color: property of the selection element to match your sites color scheme. So p::selection { color: #ff0000; } would change the color of selected text in a paragraph from the default blue color to red. I applied it to my CSS so go ahead and try it, you'll like it... I hope.

Properties

  1. align-items

    The align-items property is used to specify how elements are positioned on the cross axis in a flex or grid container. There are 5 differnt values that can be assigned to the align-items property:

    1. flex-start:
    2. flex-end:
    3. center:
    4. baseline:
    5. stretch:

    flex-start:, flex-end:, center;, and stretch: are self explanatory. However baseline: can use some explanation. In baseline: the items are aligned along the main axis according to the baseline of their text.

  2. animation

    The animation: property is used to add movement to other css properties such as color, background-color, height, or width. The documentation says that each animation needs to be defined using the "at-rule" which from what I see requires you to change your stylesheet. I added a class called element with the property, and assigned that class to this paragraph to try it out, but without using the "at-rule (which I'm afraid to mess with on my school site) it didn't work. Follow the link above and you can see that it's pretty cool. The element class caused a parse error on css validation so I had to remove it.

  3. color-scheme

    I wish I had found this one before I spent all the time on the other two. This one looks interesting also. It allows you to let the browser apply it's default light or dark scheme to either individual elements or to the global properties of your site.

Summary

The CSS-Tricks Almanac is an interesting resource. I think I'll be spending some time here in the future. When I have some to spare.