Targeted Selector

1. Child (div p)

 div p{

      background-color:#555;

}

 

 

라고 하면 div 아래에 있는 모든 p들(div의 child)의 배경색이 변한다.

마지막 hello world는 div의 child가 아니기 때문에 배경 색이 변하지 않는다.

 

 

 

2. Direct Child (div > p)

div > p{

      background-color:#555;

}

 

div > p 라고 selector를 주면 div의 direct child인 p들만 선택이 된다.

item2는 (div의 child 중 한 명이지만) ul 속 li의 direct child이기 때문에 선택이 안된다.

 

 

 

 

 

3. Directly After (div + p)

div + p{

     bakground-color:#333;

     color:#fff;

}

 

div+p로 selctor를 주면 div의 바로 뒤에 나오는 p가 선택이 된다.

이때 바로 뒤에 나온 다는 것은 div가 <div></div>로 이렇게 닫힌 뒤 바로 뒤에 나오는 p를 말하는 것!

그렇기 때문에 Hello World1은 선택되지 않는다.

 

 

 

4. Attribute로 선택

 

a[target]{

...

}

 

a 태그 중 target이라는 attribute가 있는 것만 선택이 된다.

 

 

 

 

 

 

5. Attribute의 Value로 선택

 

a[target="_blank"]{

...

}

 

Link 2도 target이라는 Attribute를 가지고 있지만, value가 _self이므로 선택되지 않는다.

 

 

 

 

*target specific attribute values

 

나는 이름이랑 email 입력 창만 width를 100% 주고 싶은데

input을 선택하는 바람에 submit 버튼도 같이 width:100% 적용 됐다.

 

이럴 때 해결책이 바로 attribute의 value를 구체적으로 선택하는 것!

 

 

이렇게 input의 attribute 값을 확실히 지정해주면

내가 원했던 대로 이름과 email 입력창에만 width:100%가 적용된다.