CSS - 1

selector

/* id selector */
#my-form {}

/* class selector */
.container {}

/* 2개의 클래스를 동시에 가진 요소 */
.container.row {}

/ * descendant selector */
ul li {}
 
/* grouping selectors */
h1, h2, h3 {}

/* pseudo class selectors */
a {} /* a 에 적용한 속성은 pseudo class 에는 적용 안됨 */
a::link {} /* href 가 있는 a 태그만 적용 */
a::visited {}
a::focus {} /* tab 키로 focus 될때 나타나는 속성 */
a::hover {}
a::active {} /* 마우스를 누르고 있는 중에 나타나는 속성 */

inheritance

/* body 에 적용한 속성은 그 하위에도 적용된다 */
/* 그러나 상속이 안되는 속성도 있다 */
body {
  color: #222222;
}

specificity

중복되는 속성이 있을 때 더 구체적인 선택자의 속성을 적용한다.

1. universal (*)
2. type (p)
3. clas (.example)
4. id (#example)

specificiy calculator

cascade

• css 는 위에서 아래로 적용된다. 그러므로 위에서 적용한 속성이 아래에서 override 될 수 있다.
• 그러나 specificity 값이 더 크면 순서에 상관없이 해당 속성을 적용한다.
• !important 가 붙은 속성의 경우 순서, specificity 값을 무시하고 적용한다.

best practice

가장 global한 속성부터 시작해서 구체적인 속성순을 따라가며 위에서 아래방향으로 작성. 주석으로 각 단계를 표시한다.

/* global
================= */

/* profile
================= */

/* projects
================= */