css정리

선택자

1. 기본 선택자

• *(전체)

• div(요소)

• .(클래스)

• #(아이디)

• [attr]특성 - 특성을 가지고 있는 태그 선택,
  아래 예시 : type="text"를 가지고 있는 input태그 선택

<input type="text>

input[type="text"]{
  border-color: red;
}

2. 그룹 선택자

• ',' - 선택할 태그를 ,로 이어서 선택

<div class="box1">box1<div>
<div class="box2">box2<div>
<div class="box3">box3<div>

.box1, .box3{
  color: red;
}

• '' - 클래스가 여러개 인 경우 여백 없이 붙여서

<div class="box border-box">box1<div>
<div class="box bg-box">box2<div>

.box.border-box{
  border: 10px solid red;
}

3. 결합자

• ' ' - 자손 결합자

<div class="box">
   <p class="text">text</p>
<div>

.box .text{
  color: red;
}

• '>' - 자식 결합자
  바로 직계 자손만 선택
  자식 1의 글자색만 변경됨

<div>
   <span>자식1
      <span>자식2</span>
   </span>
</div>

div > span{
  color: gray;
}

• '~' - 일반 형제 결합자
  첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소를 선택
  2,3,4의 색이 빨강으로 변경됨

<p>1</p>
<div>2</div>
<div>3</div>
<div>4</div>

p ~ div{
   color: red;
   }

• '+' - 인접 형제 결합자
  인접 형제, 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택
  2만 색이 빨강으로 변경됨

<p>1</p>
<div>2</div>
<div>3</div>
<div>4</div>

p + div{
   color: red;
   }

4. 가상 클래스 선택자

• :hover
  마우스가 올라갔을 때
• :focus
  키보스 포커스 됬을 때
• :focus-visible
  버튼을 누르고 땠을 때 포커스 빠지게
• :active
  버튼을 눌렀을 때 찰나
• :disabled
  버튼 사용 불가능 상태일때
• :not()
  () 가 아닐때
  hover 다시 안되도록 사용할 수 있다. disabled로 변환 시 사용 불가능 하지만 다시 마우스를 올리면 hover에 적용해놓은 스타일이 적용될 수 있는데 이를 막을 수 있다.
  예시

button:not(:disabled):hover{
   background-color: gray;
}

• :checked
  체크 박스와 함께 체크되었을 때 스타일 변경

• :first-child
  첫 번째 자식

• :last-child
  마지막 자식

• :nth-child
  n번째 자식, 특정 자식 선택가능

• :only-child
  자식요소가 하나인 경우

5. 가상 요소 선택자

::before
컨텐츠 앞에 가상요소 생성
::after
컨텐츠 뒤에 가상요소 생성
::placeholder
input에 입력할 가이드 설명