:hover와 관련된 코딩을 하던 중 어려운 부분이 나왔다. div로 묶인 부모 속성과 자식 속성을 다루는 내용이었는데, 부모 속성에 마우스를 올리면 투명했던 자식 속성 div가 나타나는 내용이었다. 투명도에 관해선 opacity:로 하는 걸 알았기 때문에 간단했다.
(구체적으로 말하면 부모 속성은.colorBox, 자식 속성은.colorValue였다. 구현하고자 했던 바는 .colorBox 부분에 마우스를 올리면 투명했던 .colorValue가 나타나는 것이다.)
문제는 hover속성을 어디에 적용해야 하는지였다. 부모 속성에 적용할 경우 부모 속성이 투명해 질 것이고, 자식 속성에 작성하면 거기에만 opacity가 적용될 것이다. 실제로 나도 자식 속성에 hover를 적용했고 마우스를 그 부분에 올려야지 hover가 작동했다.
결론만 보자면.colorBox:hover .colorValue{}가 답이었다. colorBox에 :hover를 적용하되, .colorValue가 반응하게 하는 내용이다. 가상 선택자와 복합 선택자를 이해해야 하는 것이 관건이었다. 가상 선택자가 복합 선택자로서 사용될 수 있다는 알았다는 점에서 큰 수확이었다.
1. 복합 선택자
복합 선택자는 두 개 이상의 선택자 요소가 모인 선택자를 말한다. 종류는 하위 선택자와 자식 선택자, 형제 선택로 나뉜다.
1-1 하위 선택자
하위 선택자는 임의 속성의 자식 속성을 선택하는 선택자다. 부모 속성에 포함된 모든 하위 요소에 스타일을 적용한다. 가령 selectorA selectorB {} 이러한 내용이 있을 경우는 selectorA의 자식 속성인 selectorB를 선택하는 것이다.
1-2 자식 선택자
자식 선택자는 특정 속성의 자식 속성 선택한다. selectorA > selectorB {}와 같이 적으며 selectorA의 자식 속성 중 하나인 selectorB를 선택하는 것을 의미한다. 주의할 점은 한 단계 아래에 있는 속성만 선택한다는 점이다.
1-3 형제 선택자
형제 선택자는 어떤 속성의 형제 속성을 선택한다. h1 ~ p는 h1 속성의 형제인 p를 선택한다. 추가적으로 인접 형제 선택자가 있다. 인접 형제 선택자는 한 속성의 형제 속성 중 첫 번째 속성을 선택하는 것을 의미한다. h1 + p는 h1의 형제 속성 중 첫 번째 요소를 선택한다.
2. 가상 선택자
가상 선택자는 크게 가상 클래스 선택자와 가상 요소 선택자로 나눌 수 있다. HTML 상에 이미 있는 요소를 선택하면 가상 클래스 선택자, HTML에 존재하지 않지만 가상의 요소를 생성해 선택하는 것이 가상 요소 선택자다.
2-1 가상 클래스
가상 클래스는 선택될 특정 속성에 대해 특별한 스타일을 적용시켜준다. :active, :hover 등이 흔히 쓰이며, 특정 상태에 대한 :가상 클래스명 을 적어주고 그 아래에 '그 상태' 에 대한 스타일을 적으면 된다.
2-2 가상 요소 클래스
가상 요소 클래스는 특정 부분에 스타일을 입히고 싶을 때 사용한다. 가상 클래스가 특정 상태에 대해 스타일을 주는 것이라면 가상 요소 클래는 특정 콘텐츠에 대한 스타일을 적용시키기위해 사용된다. 콜론(:)이 한 개일 때와 두 개일 때가 있는데, 두 개(::)는 CSS3 이후 버전에서 사용되며 한 개는(:) 그 이전 버젼에서 쓰인다.
2-3 대표적인 가상 클래스 선택자
• ::before: 콘텐츠의 앞에 위치하는 공간을 선택함.
• ::selection: 드래그한 콘텐츠를 선택함. 지원하지 않는 브라우저가 있다.
• :last-child: 부모 요소 안에 있는 마지막 자식만 선택한다.
• :first-child: 부모 요소 안에 있는 첫번째 자식만 선택한다.
• :first-of-type: 같은 태그의 첫번째 요소만 선택한다.
• :last-of-type: 같은 태그의 마지막 요소만 선택한다.
• :not(:last-child): 마지막 요소를 제외한 것들 선택한다.