simple selectors

category

simple selectors
combinator selectors
pseudo-class selectord
pseudo-elements selectors
attribute selectors

simple selectors?

simple selectors는 elements들을 name, id, class에 따라 선택하는 것입니다.

element selector 예제

 p {
  text-align: center;
  color: red;
}

p tag를 이용하여 생성한 모든 element에 해당 style을 적용할 수 있습니다.

id selector 예제

#para1 {
  text-align: center;
  color: red;
}

tag에 attribute로 내려준 id의 값이 "para1"인 값들에 해당 style을 적용할 수 있습니다.

class selector 예제

.center {
  text-align: center;
  color: red;
}

tag에 attrubute로 내려준 class(react의 경우 classname)의 값이 "center"인 값들에 해당 style을 적용할 수 있습니다.

응용 예제

1. elment&&classname 예제

p.center {
  text-align: center;
  color: red;
}

위 code는 ptag이면서 class attribute가 "center"인 element에 style을 적용합니다.

2. grouping selector 예제

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

위와 같이 같은 style property를 가진다 면 아래와 같이 grouping하여 code의 숫자를 줄일 수 있습니다.

h1, h2, p {
  text-align: center;
  color: red;
}

what i learend

• 가장 자주 사용하던 selector
• 특정 element이면서 classname을 가지는 selector의 경우 새로 배움
• 코드 숫자를 줄인다=가독성을 높인다 라는 생각이 들어 더 공부할 필요가 있어보임