CSS 선택자

CSS 선택자 (최대한 단순하게 하는 것이 좋다)

• p.book.book-info{
  color: white;
  }
  이렇게 하면 p태그이면서 book클래이스면서 book-info클래스인 것에 적용

• 선택자 목록
  ex)
  .title, .date {
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  }

• 선택자 붙여 쓰기
  ex)
  .delay.book-info {
  color: #000000;
  }

• 자식, 자손 선택 (같은 클래스 이름이 있을 때 덮어쓰는 방법)
  자식 결합자 (.book-container가 부모 .title이 자식)
  ex)
  .book-container > .title{
  }
  자손 결합자 (.book-container가 부모 .title이 자손)
  ex)
  .book-container .title{
  }
  자손 결합자를 더 많이 쓴다.
  .gallery > * {
  } (.gallery의 모든 자식 요소 선택)
  n번째 자식 선택자
  .gallery :nth-child(3) {
  }
  짝수번째 자식
  .gallery :nth-child(even) {
  }
  홀수번째 자식
  .gallery :nth-child(odd) {
  }
  첫번째 자식
  .gallery :first-child {
  }
  홀수번째 자식
  .gallery :last-child {
  }

캐스케이드

• 캐스케이드 순서
  inline 스타일이 가장 우선선위가 높다
  같은 선택자인 경우 나중에 쓸 수록 우선순위가 높다
  id > class > tag

상속

• css속성은 조상태그에서 상속이 된다
  Inherited from이라고 적혀있는 것 중에 진한 글씨가 상속된 것이다
  명시도가 높더라도 상속에 의해 적용될 스타일과 직접 요소에 적용되는 스타일이 부딪힌다면 아무리 명시도가 높아도 직접 요소에 적용되는 스타일이 반영된다.

가상 클래스(active, hover, focus, visited)

• active

• hover
  ex)
  a {
  color: #ffffff;
  text-decoration: none;
  }
  밑줄을 그어주는 가상 클래스
  a:hober {
  text-decoration: underline;
  }

• focus

• visited

a태그가 여러개일 경우 a.book:hover 이런 식으로 클래스 이름도 적어줘야 한다