# css selector
https://flukeout.github.io/
## Descendant Selector
Select an element inside another element
`A B`
Selects all B inside of A. B is called a descendant because it is inside of another element.

## Comma Combinator
Combine, selectors, with... commas!
`A, B`
Thanks to Shatner technology, this selects all A and B elements. You can combine any selectors this way, and you can specify more than two.

## The Universal Selector
You can select everything!
`*`
You can select all elements with the universal selector!

## Adjacent Sibling Selector
Select an (one) element that directly follows another element
`A + B`
This selects all B elements that directly follow A. Elements that follow one another are called siblings. They're on the same level, or depth.

In the HTML markup for this level, elements that have the same indentation are siblings.

## General Sibling Selector
Select all elements that follows another element
`A ~ B`
You can select all siblings of an element that follow it. This is like the Adjacent Selector (A + B) except it gets all of the following elements instead of one

## Child Selector
Select direct children of an element
`A > B`
You can select elements that are DIRECT children of other elements. A child element is any element that is nested directly in another element.

Elements that are nested deeper than that are called descendant elements.

## First Child Pseudo-selector
Select a first child element inside of another element
`:first-child`
You can select the first child element. A child element is any element that is directly nested in another element. You can combine this pseudo-selector with other selectors.

## Only Child Pseudo-selector
Select an element that are the only element inside of another one.
`:only-child`
You can select any element that is the only element inside of another one.

## Last Child Pseudo-selector
Select the last element inside of another element
`:last-child`
You can use this selector to select an element that is the last child element inside of another element.

Pro Tip → In cases where there is only one element, that element counts as the first-child, only-child and last-child!

## Nth Child Pseudo-selector
Select an element by its order in another element
`:nth-child(A)`
Selects the nth (Ex: 1st, 3rd, 12th etc.) child element in another element

## Nth Last Child Selector
Select an element by its order in another element, counting from the back
`:nth-last-child(A)`
Selects the children from the bottom of the parent. This is like nth-child, but counting from the back!

## First of Type Selector
Select the first element of a specific type
`:first-of-type`
Selects the first element of that type within another element

## Nth of Type Selector
`:nth-of-type(A)`
Selects a specific element based on its type and order in another element - or even or odd instances of that element.

## Nth-of-type Selector with Formula
`:nth-of-type(An+B)`
The nth-of-type formula selects every nth element, starting the count at a specific instance of that element.

## Nth-of-type Selector with Formula
`:nth-of-type(An+B)`
The nth-of-type formula selects every nth element, starting the count at a specific instance of that element.

## Only of Type Selector
Select elements that are the only ones of their type within of their parent element
`:only-of-type`
Selects the only element of its type within another element.

## Last of Type Selector
Select the last element of a specific type
:last-of-type
Selects each last element of that type within another element. Remember type refers the kind of tag, so p and span are different types.

I wonder if this is how the last dinosaur was selected before it went extinct.

## Empty Selector
Select elements that don't have children
`:empty`
Selects elements that don't have any other elements inside of them.

## Negation Pseudo-class
Select all elements that don't match the negation selector
`:not(X)`
You can use this to select all elements that do not match selector "X"

## Attribute Selector
Select all elements that have a specific attribute
[attribute]
Attributes appear inside the opening tag of an element, like this: span attribute="value". An attribute does not always have a value, it can be blank!
Examples

## Attribute Selector
Select all elements that have a specific attribute
A[attribute]
Combine the attribute selector with another selector (like the tag name selector) by adding it to the end.

## Attribute Value Selector
Select all elements that have a specific attribute value
[attribute="value"]
Attribute selectors are case sensitive, each character must match exactly.

## Attribute Starts With Selector
Select all elements with an attribute value that starts with specific characters
[attribute^="value"]

## Attribute Ends With Selector
Select all elements with an attribute value that ends with specific characters
[attribute$="value"]

## Attribute Wildcard Selector
Select all elements with an attribute value that contains specific characters anywhere
[attribute*="value"]
A useful selector if you can identify a common pattern in things like class, href or src attributes.

# flex frog
https://flexboxfroggy.com/
In the horizontal axis it is called content, in the y axis it is called items

#pond {
display: flex;
justify-content:flex-end;
}

#pond {
display: flex;
justify-content:center;
}

#pond {
display: flex;
justify-content:space-around;
}

#pond {
display: flex;
justify-content:space-between;
}


#pond {
display: flex;
align-items:flex-end;
}

#pond {
display: flex;
justify-content: center;
align-items:center;
}

#pond {
display: flex;
justify-content:space-around;
align-items:flex-end;

#pond {
display: flex;
flex-direction:row-reverse;
}

#pond {
display: flex;
flex-direction:column;
}

#pond {
display: flex;
flex-direction:column;
justify-content:flex-end;
}

#pond {
display: flex;
justify-content:center;
flex-direction:row-reverse;
align-items:flex-end;
}








# grid garden
https://cssgridgarden.com/
https://github.com/mikesmall/css-grid-garden-solutions