CSS 필수 선택자

아래 웹싸이트에서 정리 잘 해둠.
https://code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048

그 중에서 몇 개 정리하면

X + Y

ul + p {
   color: red;
}

인접 선택자로 부르는 선택자입니다. 앞의 요소 바로 뒤에 있는 요소만 선택합니다. 위 코드에서 각 ul 뒤에 오는 첫 번째 단락의 텍스트만 빨간색이 됩니다.

X ~ Y

ul ~ p {
   color: red;
}

이 선택자는 X + Y와 유사하지만 덜 엄격합니다. 인접 선택자(ul + p)는 앞의 선택자 바로 뒤에 오는 첫 번째 요소만을 선택하지만, 얘는 ul 아래 있는 모든 p 요소를 선택

X[href*="nettuts"]

a[href*="tuts"] {
  color: #1f6053; /* nettuts green */
}

별표는 입력값이 속성값 안 어딘가에 보여야 한다는 것을 표시합니다. 그렇게 이 구문은 nettuts.com, net.tutsplus.com 그리고 tutsplus.com까지도 적용하고 있습니다.
폭넓은 표현이라는 것을 알아 두세요. 만약 앵커 태그의 url에 tuts 문자열이 일부 Evato가 아닌 사이트로 연결되어 있다면 어떨까요?
더 자세히 작성해야 한다면, 문자열의 앞과 뒤에 ^와 $를 붙이세요.

X[href^="http"]

a[href^="http"] {
   background: url(path/to/external/icon.png) no-repeat;
   padding-left: 10px;
}

웹사이트에서 외부로 연결된 링크 옆에 작은 아이콘을 어떻게 보이게 했는지 궁금해한 적이 있나요? 틀림없이 전에 본 적이 있을 것입니다. 링크를 클릭하면 전혀 다른 웹사이트로 이동하리라는 것을 알게 해주니까요.
문자열의 시작을 표기하는 정규 표현식에서 흔히 사용됩니다. 만약 http로 시작하는 href 값을 가진 앵커 태그를 대상으로 하고 싶다면, 위의 코드와 유사한 선택자를 사용하면 됩니다.

X[href$=".jpg"]

이번 경우에는 이미지(나 최소한 .jpg로 끝나는 url)로 링크가 걸린 앵커 전체를 찾을 것입니다.

X[data-*="foo"]

이미지로 링크 걸린 앵커마다 data-filetype 속성을 넣는다면?
갈고리(hook) 역할을 이용해 해당 앵커만 대상으로 삼는 일반 속성 선택자를 사용할 수 있습니다.

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>
a[data-filetype="image"] {
   color: red;
}

X[foo~="bar"]

물결표(~)를 이용하면 띄어쓰기로 구분되는 값이 있는 속성을 대상으로 할 수 있습니다

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
   color: red;
}
/* And which contain the value "image" */
a[data-info~="image"] {
  border: 1px solid black;
}

X:checked

input[type=radio]:checked {
   border: 1px solid black;
}

이 가상 클래스는 라디오 버튼이나 체크박스처럼 체크되는 사용자 인터페이스 요소만을 대상으로 합니다. 아래 코드처럼 간단합니다.

X:after

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }
.clearfix { 
   *display: inline-block; 
   _height: 1%;
}

이 핵은 요소 뒤에 공간을 덧붙이고 float 효과를 제거하는데 :after 가상 클래스를 사용했습니다. 특히 overflow: hidden; 방법이 불가능한 경우 여러분이 사용할 방법 중에 가장 훌륭한 방법입니다.
https://takeu.tistory.com/20 (설명 잘 됨)

X:not(선택자)

div:not(#container) {
   color: blue;
}

negation 가상 클래스는 특히 유용합니다. 제가 모든 div를 선택하고 싶은데, 그중에서 id가 container인 것만 빼고 싶다고 합시다. 위의 코드가 그 작업을 완벽하게 수행합니다.

가상 클래스(Pseudo-class) & 가상 요소(Pesudo-element)

가상 클래스(Pseudo-class)란?
가상 클래스(Pseudo-class)는 요소에 직접적으로 클래스를 부여하지는 않았지만,
요소의 상태에 따라서 클래스를 적용한 것처럼 효과를 다르게 줄 수있다.
가장 많이 쓰는 예시는 a태그의 효과를 바꾸기 위한 a:hover, a:link 이고,
이때 a뒤에 쓰인 :hover, :link를 가상 클래스라고 한다.

가상 요소(Pseudo-elements)란?
가상 요소(Pseudo-elements)는 말 그대로 가상의 요소를 만들고 내용을 넣어 출력하겠다는 것이다. 보통 ::after, ::before을 자주 사용한다.

X::가상 요소

   font-weight: bold;
   font-size: 1.2em;
}

첫 번째 줄이나 첫 글자와 같이 요소 일부분에 스타일을 적용하는데 가상 요소(::로 표기되는)를 사용할 수 있습니다. 효과를 보려면 이 요소를 반드시 블록 레벨 요소에 적용해야 합니다.

단락의 첫 글자

p::first-letter {
   float: left;
   font-size: 2em;
   font-weight: bold;
   font-family: cursive;
   padding-right: 2px;
}

이 코드는 페이지에 있는 단락을 모두 찾은 다음 해당 요소의 첫 글자만을 대상으로 하는 추상 개념입니다.
신문처럼 글의 첫 글자를 스타일로 꾸미는 데 자주 사용됩니다.