CSS 셀렉터, 기초 이론 정리.

https://www.youtube.com/watch?v=gGebK7lWnCk&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=7 

 

CSS (Cascading Style Sheet)

 

CSS는 우리가 작성한 HTML을 우리가 원하는대로 꾸며줄 수 있게 해준다. 

 

 

Cascading

 

정의된 세부적인 것이 있을경우 그것을 쓰고 없으면 다음으로 넘어간다.

 

다음 순서를 따른다.

 

1. Author Style : 우리가 정의한 Style

 

2. User Style: 사용자가 정의한 Style

 

3. Browser가 정의한 Style

 

!important 는 Cascading을 분리하는 방법 가능하면 쓰지 않는 것이 좋다.

 

 

 

Selectors

 

 

Tag 가까이 설정한 값들이 Universal보다 우선순위에 있다. 

 

 

Attribute Selector

/* <a> elements with a title attribute */
a[title] {
  color: purple;
}

/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

/* <a> elements with an href containing "example" */
a[href*="example"] {
  font-size: 2em;
}

/* <a> elements with an href ending ".org" */
a[href$=".org"] {
  font-style: italic;
}

/* <a> elements whose class attribute contains the word "logo" */
a[class~="logo"] {
  padding: 2px;
}

 

 

CSS Selector 를 연습할 수 있는 사이트

 

https://flukeout.github.io/

CSS Diner