프로젝트 진행하면서 버튼 비활성화 시 css를 추가하는 기능을 하려고 추가하려고 했다. 하지만 기존의 방식으로 적용하니까 제대로 작동이 안했다. 이를 해결하기 위해 css선택자와 결합자의 이해를 높이기 위해 글을 정리하기로 했다.

👉 총정리

// 기본 
🎈 Type Selector  태그 자체를 선택
	p { }

🎈 Class Selector : 점표기법으로 선택
	.title { }

🎈 ID Selector : #으로 선택
	#title { }

🎈 Attribute Selector : 속성을 가진 모든 태그를 선택
	a[taeget]  { }
	input[type="text"] { }

🎈 Pseudo Class : 특정 상태에 적용
	a:hover { }
	li:nth-child(odd) { }

🎈 Child Combinator : 직속자식을 > 로 선택
	parent > child { }

🎈 Descendant Combinator : 후손을 선택
	ancestor descendant { }

🎈  CSS Nesting 
  	nav
	&. light     - 같은 형제 선택
	> li          - 자식 선택
 	&:	  - 같은 형제 + Pseudo

👉 CSS 기본 선택자

🎈 Type Selector

태그 자체를 선택해서 HTML문서 내 모든 같은 태그에 적용시키는 방식입니다.

p {
	color : red
}

strong {
	font-weight: 500
}

🎈 Class Selector

일반적으로 사용하는 점표기로 대상에 접근하는 방식입니다.

.error {
  color: red;
}

🎈 ID Selector

Dom에서 많이 사용하는 방식입니다

#title {
  color: red;
}

👉 CSS 심화 선택자

🎈 Attribute Selector

(= 속성 선택자)

태그 뒤에 [ ] 안에다가 속성 값을 입력해서 섬세한 스타일을 할 수 있습니다.

[] 안에 속성명만 입력 시, 해당 속성이 있는 모든 요소를 선택합니다.

a[target] {
  color : red
}

[] 안에 속성값도 입력 시, 속성명과 속성값이 정확히 일치하는 모든 요소를 선택합니다
타입이 리셋인 모든 버튼을 선택하는 예제입니다

input[type="text"] {
  background-color: yellow;
}

🎈 Pseudo Class

<a>태그의 경우 다양한 상태가 있습니다.
각각의 상태에 css를 적용하고 싶다면, Pseudo Class(가상 클래스)를 적용하는게 바람직합니다.
상태로는 hover visited focus 등 이 있습니다

// 마우스를 올리면 적용됩니다
a:hover {
    color: red;
}

// 입력필드에 포커스가 가면 적용됩니다.
input:focus {
    border-color: blue;
}

자식요소를 선택해서 사용도 가능합니다

// 홀수 번째 li에 적용됩니다
li:nth-child(odd) {
    background-color: lightgray;
}

// 첫번째 자식(모든p)에 적용됩니다
p:first-child {
    font-weight: bold;
}

// 마지막 자식(모든p)에 적용됩니다
p:last-child {
    font-style: italic;
}

버튼에서 엄청 많이 쓰이는 disabled 도 수도 클래스입니다.
아래 예시는 비활성화된 모든 버튼의 색상을 변경하는 예시입니다

button:disabled {
    color: gray;
}

신기한 css도 있네요

// 모든 p태그 앞에 "Note: "를 붙입니다.
p::before {
    content: "Note: ";
    font-weight: bold;
}

🎈 Universal Selector

전체 웹페이지를 선택하고 싶을 때 사용합니다.
보통 reset css 에 사용됩니다.

* {
  box-sizing: border-box;
}

👉 CSS 결합자

선택자를 연결하거나 골라서 선택하는 방법

🎈 Child Combinator

(자식 결합자)
첫번째태그 하위의 직속자식 태그를 선택할 때 사용합니다. 즉 부모태그 바로 밑의 자식태그만 선택하고 더 깊은 후손들은 선택하지 않습니다.

parent > child {
/ 스타일 규칙 /
}

아래 코드는, div 요소의 직속 자식인 모든p 요소를 선택합니다.

div > p {
    color: green;
}

//여러번 들어가서 구체적 선택도 가능합니다
.container > section > h2 {
    font-size: 24px;
}

🎈 Descendant Combinator

(자손 결합자)
첫번째 태그 하위의 후손 태그를 선택할 때 사용합니다. 즉 부모태그의 모든 깊은 후손을 선택합니다.

ancestor descendant {
/ 스타일 규칙 /
}

아래 코드는, div태그 후손인 모든 p태그 선택합니다 (자식, 후손 모두). 즉 div아래 p태그가 있다면 DOM트리 어디에 위치하든 스타일이 적용됩니다.

div p {
    color: blue;
}

🎈 Next-sibling Combinator

(인접 형제 결합자)
해당 결합자는 첫번째 태그 바로 아래 두번째 태그가 있다면 선택하는 결합자입니다

아래 코드는 <h3> 요소 바로 뒤에 붙어있는 요소가 <p> 요소라면 스타일을 적용해줍니다.

  h3 + p {
  text-indent: 1em;
}

아래 같은 HTML인 경우에만 CSS가 적용됩니다.

<h3>제목</h3>
<p>여기에는 내용이 옵니다.</p>
<p><a href="#">여기</a>를 클릭하세요.</p>

👉 CSS Nesting

어떤 선택자 내부에 다른 선택자를 넣어서 계층적인 스타일이 가능케하는 문법

CSS Nesting을 지원하지 않았을 때는, 위에서 본 연산자를 나열하여 하나씩 작성하였습니다

nav {
  /* 네비게이션 스타일 */
}

nav.light {
  /* 라이트 모드 네비게이션 스타일 */
}

nav.dark {
  /* 다크 모드 네비게이션 스타일 */
}

nav > li {
  /* 네비게이션 안에 있는 리스트 스타일 */
}

nav > li > ul {
  /* 네비게이션 안에 있는 리스트 안에 있는 일반 아이템 스타일 */
}

nav > li > ul.new {
  /* 네비게이션 안에 있는 리스트 안에 있는 새로운 아이템 스타일 */
}

nav a {
  /* 네비게이션 안에 있는 링크 스타일 */
}

nav a:visited {
  /* 네비게이션 안에 있는 링크의 방문 상태 스타일 */
}

nav a:focus,
nav a:hover {
  /* 네비게이션 안에 있는 링크의 포커스, 호버 상태 스타일 */
}

위 방식은 중복되는 부분이 많습니다.
nav > li > ul.new 이렇게 파고 들어 갈 수록 중복되는 앞 부분을 계속 써줘야하는 귀찮음이 생기죠.
CSS Nesting 지원 이후 부터는 이런 방식이 아닌
한방에 연결하는 방식을 지원합니다

// 🎈 Nesting 변경
nav {
  /* 네비게이션 스타일 */

  &.light {
    /* 라이트 모드 네비게이션 스타일 */
  }

  &.dark {
    /* 다크 모드 네비게이션 스타일 */
  }

  > li {
    /* 네비게이션 안에 있는 리스트 스타일 */

    > ul {
      /* 네비게이션 안에 있는 리스트 안에 있는 일반 아이템 스타일 */

      &.new {
        /* 네비게이션 안에 있는 리스트 안에 있는 새로운 아이템 스타일 */
      }
    }
  }

  a {
    /* 네비게이션 안에 있는 링크 스타일 */

    &:visited {
      /* 네비게이션 안에 있는 링크의 방문 상태 스타일 */
    }

    &:focus,
    &:hover {
      /* 네비게이션 안에 있는 링크의 포커스, 호버 상태 스타일 */
    }
  }
}

위 코드 처럼 Nesting을 활용하면 중복도 사라지고 계층 구조도 한눈에 파악이 가능해집니다.

🎈 Nestingd의 장점

• 동일한 선택자를 반복할 필요가 없어집니다.
• 관련있는 스타일이 가까운 곳에 묶어 집니다.
• CSS 스타일과 HTML 마크업이 비슷한 계층적인 구조를 갖게 됩니다.
• 스타일을 찾거나 편집, 삭제하는 것이 수월해 집니다.
• 불필요한 클래스 사용을 줄이는데 도움이 됩니다.

특히 클래스선택자를 활용하기 위해 과도하게 classname을 부여하던 관행을 없앨수 있게 되었죠

<article class="question">
  <header class="question__header">
    <h3 class="question__header__heading">질문</h3>
  </header>
  <p class="question__body">CSS Nesting을 써보셨나요?</p>
  <footer class="question__footer">
    <button class="btn secondary">아니오</button>
    <button class="btn primary">네</button>
  </footer>
</article>

// 기존 클래스 선택자 스타일
.question__header__heading {
  /* 어떤 스타일 */
}

.question__footer .btn.secondary {
  /* 어떤 스타일 */
}

// 네스팅 적용
article {
  > header {
    h3 {
      /* 어떤 스타일 */
    }
  }
  > footer {
    button.btn.secondary {
      /* 어떤 스타일 */
    }
  }
      @media (min-width: 768px) {
      flex-direction: row;
      margin-bottom: 0;
    }
}