자손, 자식, 형제 선택자

자손, 자식, 동생, 동생들(형제) 선택자 

• 태그 선택자 : 전체적으로 박스를 만들고, 위에, 아래에 따로 따로 값을 설정한다. 
• 자손 선택자 : 공백 
  • 공백을 둔다. 
  • 선택자와 선택자 상이에 빈 공백이 있으면
    첫번째 선택자를 고르고 두번째 선택자를 고른다. 
  • 첫번째 선택자 안에 두번째 선택자를 선택한 것이다. 
  • 자손1에서 모든 자손2를 선택한다 
  • 가장많이 선택하는 선택자이다. 
• 자식 선택자 : >
  • 사이에 > 꺽쇠가 포함된다. 
  • 예를 들어 .box-4 > p라면 
    • 클래스 box-4 바로 아래의 p를 선택한다고 할 수 있다. 
  • 클래스 box-4보다 작은 바로 아래의 p라고 생각하자. 
  • > 꺽쇠를 이용해서 바로 아래의 자식을 지정할 수 있다. 
  • 하나만 선택하고 싶을때 그것이 바로 자식 선택자이다. 
• 형제들 선택자 
  • 동생 선택자 : +
    • 동생은 바로 밑에 있는 동생을 찾는 것이다. 
    • 바로 밑에 있는 선택자에 표시된 동생이 존재하지 않으면 선택되지 않는다. 
      • +는 최대로 1개밖에 선택되거나 되지 않는다. 
      • 존재하여 아예 선택이 되던지 안되던지 둘 밖의 선택지가 존재하지 않는다. 
  • 동생들 선택자 : ~
    
    • 태그 h3~p 일경우 
      • 동생들이 h3의 아래의 p, p, div, div이지만 이 중에서 p만 선택이 되는 것이다. 
      • 사용빈도가 그렇게 많지않다. 
• script로 자손 선택자와 자식선택자를 선택하기 
  •  var a = document.querySelectorAll(".box p");
  •  console.log("### 자식 선택자 사용하기");     
    •  console.log(b);// p가 2개 선택됨
  • var b = document.querySelectorAll(".box > p");
  • console.log(a); // p가 8개 선택됨
    •  console.log("### 자손 선택자 사용하기");

  •