CSS selector & flex

CSS selector

Type Selector

Select elements by their type

A

Selects all elements of type A. Type refers to the type of tag, so <div>, <p> and <ul> are all different element types.

Examples
div selects all <div> elements.
p selects all <p> elements.

ID Selector

Select elements with an ID

#id

Selects the element with a specific id. You can also combine the ID selector with the type selector.

Examples

#cool selects any element with id="cool"
ul#long selects <ul id="long">

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.


Examples

p  strong selects all <strong> elements that are inside of any <p>
#fancy  span selects any <span> elements that are inside of the element with <id="fancy">

Combine the Descendant & ID Selectors

#id  A
You can combine any selector with the descendent selector.
Examples

#cool span selects all <span> elements that are inside of elements with id="cool"

Class Selector

Select elements by their class

classname
The class selector selects all elements with that class attribute. Elements can only have one ID, but many classes.
Examples

.neato selects all elements with class="neato"

Combine the Class Selector

A.className
You can combine the class selector with other selectors, like the type selector.
Examples

ul.important selects all <ul> elements that have class="important"
#big.wide selects all elements with id="big" that also have class="wide"

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.
Examples

p, .fun selects all <p> elements as well as all elements with class="fun"
a, p, div selects all <a>, <p> and <div> elements

The Universal Selector

You can select everything!

*
You can select all elements with the universal selector!
Examples

p * selects any element inside all <p> elements.

Combine the Universal Selector

A  *
This selects all elements inside of A.
Examples

p * selects every element inside all <p> elements.
ul.fancy * selects every element inside all <ul class="fancy"> elements.

Adjacent Sibling Selector

Select an 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.
Examples

p + .intro selects every element with class="intro" that directly follows a <p>
div + a selects every a element that directly follows a <div>

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.
Examples

A > B selects all B that are a direct children A

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.
Examples

span:only-child selects the <span> elements that are the only child of some other element.
ul li:only-child selects the only <li> element that are in a <ul>.

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!
Examples

:last-child selects all last-child elements.
span:last-child selects all last-child <spa>n elements.
ul li:last-child selects the last <li> elements inside of any <ul>.

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.
Examples

:nth-child(8) selects every element that is the 8th child of another element.
div p:nth-child(2) selects the second p in every div

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!
Examples

:nth-last-child(2) selects all second-to-last child elements.

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.
Examples

span:first-of-type selects the first <span> in any 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.
Examples

div:nth-of-type(2) selects the second instance of a div.
.example:nth-of-type(odd) selects all odd instances of a the example class.

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.
Examples

span:nth-of-type(6n+2) selects every 6th instance of a <span>, starting from (and including) the second instance.

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.
Examples

p span:only-of-type selects a <span> within any <p> if it is the only <span> in there.

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.
Examples

div:last-of-type selects the last <div> in every element.
p span:last-of-type selects the last <span> in every <p>.

Empty Selector

Select elements that don't have children

:empty
Selects elements that don't have any other elements inside of them.
Examples

div:empty selects all empty <div> elements.

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".
Examples

:not(#fancy) selects all elements that do not have id="fancy".
div:not(:first-child) selects every <div> that is not a first child.
:not(.big, .medium) selects all elements that do not have class="big" or class="medium".

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

a[href] selects all <a> elements that have a href="anything" attribute.
[type] selects all elements that have a type="anything". attribute

A[attribute]
Combine the attribute selector with another selector (like the tag name selector) by adding it to the end.
Examples

[value] selects all elements that have a value="anything" attribute.
a[href] selects all <a> elements that have a href="anything" attribute.
input[disabled] selects all <input> elements with the disabled attribute

Attribute Value Selector

Select all elements that have a specific attribute value

[attribute="value"]
Attribute selectors are case sensitive, each character must match exactly.
Examples

input[type="checkbox"] selects all checkbox input elements.

Attribute Starts With Selector

Select all elements with an attribute value that starts with specific characters

[attribute^="value"]
Examples

.toy[category^="Swim"] selects elements with class toy and either category="Swimwear or category="Swimming".

Attribute Ends With Selector

Select all elements with an attribute value that ends with specific characters

[attribute$="value"]
Examples

img[src$=".jpg"] selects all images display a .jpg image.

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.
Examples

img[src*="/thumbnails/"] selects all image elements that show images from the "thumbnails" folder.
[class*="heading"] selects all elements with "heading" in their class, like class="main-heading" and class="sub-heading"

---

CSS flex

display:flex; 와 함께 지정

justify-content

• 요소들을 가로선 상에서 정렬하며 다음의 값들을 인자로 받는다.

flex-start: 요소들을 컨테이너의 왼쪽으로 정렬한다.
flex-end: 요소들을 컨테이너의 오른쪽으로 정렬한다.
center: 요소들을 컨테이너의 가운데로 정렬한다.
space-between: 요소들 사이에 동일한 간격을 둔다.
space-around: 요소들 주위에 동일한 간격을 둔다.

align-items

• 다음의 값들을 인자로 받아 요소들을 세로선 상에서 정렬한다.

flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
stretch: 요소들을 컨테이너에 맞도록 늘립니다.

flex-direction

• 다음의 값들을 인자로 받아 컨테이너 안에서 요소들이 정렬해야 할 방향을 지정한다.

• Flex의 방향이 column일 경우 justify-content의 방향이 세로로, align-items의 뱡향이 가로로 바뀐다.

row: 요소들을 텍스트의 방향과 동일하게 정렬한다.
row-reverse: 요소들을 텍스트의 반대 방향으로 정렬한다.
column: 요소들을 위에서 아래로 정렬한다.
column-reverse: 요소들을 아래에서 위로 정렬한다.

order

• 때때로 컨테이너의 row나 column의 순서를 역으로 바꾸는 것만으로는 충분하지 않을 수 있다. 이러한 경우에는 order 속성을 각 요소에 적용할 수 있다. order의 기본 값은 0이며, 양수나 음수로 바꿀 수 있다.

align-self

• 개별 요소에 적용할 수 있는 또 다른 속성이다. 이 속성은 align-items가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 요소에만 적용된다.

flex-wrap

nowrap: 모든 요소들을 한 줄에 정렬한다.
wrap: 요소들을 여러 줄에 걸쳐 정렬한다.
wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬한다.

flex-flow

• flex-direction과 flex-wrap이 자주 같이 사용되기 때문에, flex-flow가 이를 대신할 수 있습니다. 이 속성은 공백문자를 이용하여 두 속성의 값들을 인자로 받습니다.

• 요소들을 가로선 상의 여러줄에 걸쳐 정렬하기 위해 flex-flow: row wrap을 사용할 수 있다.

align-content

• 여러 줄 사이의 간격을 지정할 수 있다. 이 속성은 다음의 값들을 인자로 받는다.

• align-content는 여러 줄들 사이의 간격을 지정하며, align-items는 컨테이너 안에서 어떻게 모든 요소들이 정렬하는지를 지정한다. 한 줄만 있는 경우, align-content는 효과를 보이지 않는다.

flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬한다.
flex-end: 여러 줄들을 컨테이너의 바닥에 정렬한다.
center: 여러 줄들을 세로선 상의 가운데에 정렬한다.
space-between: 여러 줄들 사이에 동일한 간격을 둔다.
space-around: 여러 줄들 주위에 동일한 간격을 둔다.
stretch: 여러 줄들을 컨테이너에 맞도록 늘린다.