[HTML&CSS_003] CSS Selectors

CSS Selectors you must memorize

X + Y

인접 선택자라고 부르는 선택자이다. 앞의 요소 바로 뒤에 있는 요소만 선택한다.

ul 뒤에 오는 첫 번째 단락의 텍스트만 빨간색이 된다.

X > Y

X Y와 X > Y의 차이점은 후자의 경우, 직계 자식만을 선택한다는 것이다.

#container > ul 선택자는 id가 container인 div의 직계 자손인 ul만 대상으로 삼는다. 예를 들어 첫 번째 li의 자식인 ul은 대상이 되지 않는다. 이런 이유로 자식 선택자를 이용해 성능을 향상시킬 수 있다.

X ~ Y

이 형제 선택자는 X + Y와 유사하지만 덜 엄격하다. 인접 선택자(ul + p)는 앞의 선택자 바로 뒤에 오는 첫 번째 요소만을 선택하지만, 이 선택자는 좀 더 관대하다. 위의 예를 보면 ul 아래 있는 모든 p 요소를 선택할 것이다.

X[title]

속성 선택자(attributes selector)라고 말하며, 앞의 예에서 title 속성이 있는 앵커 태그만을 선택한다. title이 없는 앵커 태그에는 특정한 스타일이 적용되지 않는다.

X[href=”foo”]

위의 코드는 https://net.tutsplus.com;로 연결된 전체 앵커 태그에 스타일을 적용할 것이다. 그 외의 앵커 태그는 스타일의 영향을 받지 않는다. 동작은 잘하겠지만, 융통성은 낮다.

X[href*=”nettuts”]

별표(*)는 입력 값이 속성값 안 어딘가에 보여야 한다는 것을 표시한다. “tuts”를 포함하기만 하면 되기에 nettus.com, net.tutsplus.com, 그리고 tutsplus.com에도 적용된다.

*는 폭넓게 적용된다고 알아두자.

X[href^=”http”]

문자열의 시작을 표기하는 정규표현식에서 ^는 흔히 사용된다. http로 시작하는 href 값을 가진 앵커 태그를 대상으로 하고 싶다면, 위의 코드와 유사한 선택자를 사용하면 된다.

X[href$=”.jpg”]

^와 매우 유사하지만, 이번에는 문자열의 끝에 적용되는 기호이다.

X:not(선택자)

negation 가상클래스이다. 모든 div를 선택하는데, 그 중에서 id가 container인 것만 빼고 싶다고 하자. 위의 코드가 그 작업을 완벽히 수행한다.

이 코드처럼 마지막 자식요소가 아닌 경우에만 선택해서 margin-right 속성에 간격을 설정해 줄 수도 있다.

X:nth-child(n)

nth-child 가상 클래스를 이용하면 특정 요소를 지목할 수 있다. 자식 요소의 변수 집합을 선택하는 데에도 이 방식을 활용할 수 있다. 가령, 항목의 4번째마다 선택하려면 li:nth-child(4n)로 작성하면 된다.

 

출처

code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

The 30 CSS Selectors You Must Memorize

CSS selector를 테스트 해보자~

flukeout.github.io/

CSS Diner