잘 알려지지 않은 CSS 선택기 9개로 스타일링 게임 빛깔 더하기

그래서 당신은 기본.class과 #id 성명을 파악했고, .class1.class2와 .class1 .class2의 차이를 알고 있습니다. 하지만 당신은 ~ 선택기에 대해 얼마나 익숙합니까?CSS는 매우 강력한 언어이지만 많은 사람들이 그 잠재력을 충분히 이용하지 못한다.
아이러니하게도, 더 복잡한 선택기를 사용하면 사실상 코드를 간소화할 수 있다. 왜냐하면 CSS가 진정으로 잘하는 일인 레벨링을 할 수 있기 때문이다.어쨌든 이것이 바로 CSS의 C가 대표하는 것이다. (유행하는 관점이 있지만.)이러한 자연 흐름을 이용하여 우리는 더 적은 클래스와 ID를 정의할 수 있다. 이것은 더 적은 유지보수와 유지보수를 의미한다. (이름은 프로그래밍의 최악의 부분이며, 우리로 하여금 그것에 직면하게 한다.)그것 또한 더욱 통용되는 양식을 작성하여 전체 프로젝트에서 더욱 큰 시각적 연속성을 실현하도록 장려한다.
CSS를 쓰는 것을 싫어하는 사람들은 항상 발버둥친다. 왜냐하면 그들은 길에서 겹겹이 싸우기 때문이다.폭포를 포옹하는 법을 배워서 당신의 풍격을 스스로 쓰도록 하세요!

1. * - 후손* 선택기는 원소의 모든 사망자를 목표로 할 수 있습니다.
CSS

.class1 * { border: 1px solid red; }

HTML

<div class="class1"> 
    <div>
        <p>Hello World</p>
    </div>
</div> 

이 예에서 빨간색 테두리는div와 p에 동시에 적용될 것이다. 왜냐하면 그들은 모두 .class1div의 사망자이기 때문이다.

2.> - 어린이> 선택기는 원소의 직접 하위 원소만 허용합니다.
CSS

.class1 > * { border: 1px solid red; }

HTML

<div class=‘class1’> 
    <div>
        <p>Hello World</p>
    </div>
</div> 

이 경우 > *가 아닌 *를 사용했기 때문에 경계는 <div>에만 나타나고 <p>는 <p>div의 직접 하위급이 아니기 때문이다.

3..class1-직계형제자매+ 선택기는 첫 번째 요소 다음에 지정된 요소에 스타일을 적용합니다.
CSS

span + p { color: red }

HTML

<span>Title</span>
<p>Hello</p>
<p>World</p>
<p>Again</p>

이 예에서 첫 번째+만 빨간색이다. 왜냐하면 CSS는'<p>표시 다음에 같은 부모 요소를 공유하는 첫 번째<p>표시를 찾습니다'라고 표시하기 때문이다.

FUN FACT: In CSS, two elements share the same parent are called "siblings"! Cute, right?

4.<span> - 모든 형제자매~ 선택기는 또 다른 동급 선택기이다. 거의 ~와 같지만 그 뒤를 따르는 원소가 아니라 아래의 모든 원소에 적용된다.
CSS

span ~ p { color: green }

HTML

<span>Title</span>
<p>Hello</p>
<p>World</p>
<p>Again</p>

이 예에서 모든+ 표지는 녹색이다. 왜냐하면 CSS는 "<p> 표지 뒤에 있는 모든<p> 표지를 찾아서 같은 부모 요소를 공유한다"고 표시하기 때문이다.

5.<span> - 속성[] 선택기를 사용하여 특정 속성을 가진 모든 항목을 호출하여 목표로 삼을 수 있습니다.물론, "속성"이라는 단어로 실제 속성 명칭을 바꿉니다!
더 나아가기 위해 이 선택기를 사용하여 특정 속성 값을 목표로 삼을 수도 있다.다음 예에서는 [attribute] 속성을 사용했지만 사용 가능한 모든 속성(target, lang 등을 사용할 수 있습니다.
CSS

[target] { border: 1px solid green }

[target=_blank] { background-color: red } 

HTML

<a href="http://www.google.com" target="_self"/>Link1</a>
<a href="http://www.google.com" target="_blank"/>Link2</a>

이 예에서 두 요소 title 는 모두 녹색 테두리를 가지고 있지만, 두 번째 요소만 빨간색 배경을 가지고 있다. 왜냐하면 target 속성이 있을 뿐만 아니라, target의 값도 CSS에서 지정한 값과 일치하기 때문이다.

6.<a>-위류
너는 :와:hover에 익숙할지 모르지만, 너는 more than 50 pseudo-class selectors available가 있다는 것을 알고 있니?이 예에서 우리는 :focus를 볼 것이다.
CSS

p:only-of-type { color: red }

HTML

<div>
    <span>Hello</span>
    <p>Darkness</p>
    <a>My</a>
</div>
<div>
    <span>Old</span>
    <p>Friend</p>
</div>

이 예에서'어둠'과'친구'라는 두 단어는 모두 붉은색이다. 왜냐하면 그들은 부모 원소의 유일한 유형(:only-of-type 표기)이기 때문이다.

FUN FACT: Sometimes you’ll see pseudo selectors start with a : and sometimes a ::. The difference has to do with what, specifically, you are styling.

• The single colon means it’s a pseudo-class, which is made for styling different states of an element (ex – :hover, :active, :focus, etc.)

• The double colon means it’s a pseudo-element, which is made for styling different parts of an element (ex – ::before, ::after, ::first-line, etc.). More on pseudo-elements next!

7.<p>-위원소
위조 원소는 위조류보다 흔하지 않지만 마찬가지로 유용하다.가장 흔히 볼 수 있는 것은 ::와::after인데, 이것은 우리가 CSS를 통해 요소에 새로운 내용을 추가할 수 있게 해 준다. (멋지다. 그렇지??)흥미롭고 유행하지 않는 위조 요소 ::before 는 우리가 책 스타일의 낙서를 만들 수 있도록 하는 것이다.
CSS

h1 + p::first-letter { font-size: 150%; float: left; padding-right: 2px; } 

HTML

<h1>Hello</h1>
<p>This is the start of some text</p>

위의 예시에서 ::first-letter 표지 뒤에 있는 각<p> 표지(주의해서 사용<h1> 선택기)는 첫 번째 자모에 하단 뚜껑 스타일을 획득합니다!

8.+--이것은 신기한 숫자이다
기술적으로 이 부분과 다음 부분은 모두 위조 선택기 유형의 하위 부분으로 볼 수 있지만, 나는 일부 중요한 위조 유형이 언급할 가치가 있다고 생각한다.Nth 위류는 바로 이런 매우 유용한 종류 중의 하나이다.당신은 이미 nth와 :first-child에 익숙해졌을 수도 있지만, 거의 모든 단어'first'나'last'를 포함하는 선택기에 대해 :last-child 버전이 있다는 것을 알고 있습니까?nth를 포함하는 위조 클래스는 선택기 끝에 있는 괄호 그룹에 특정한 숫자를 입력할 수 있도록 합니다.하나의 예를 보면 이것이 가장 이해하기 쉽다.
CSS

li:last-child { color: blue } 
li:nth-child(2) { color: green } 

HTML

<ul>
    <li>This</li>
    <li>Is</li>
    <li>A</li>
    <li>Long</li>
    <li>List</li>
</ul>

nth 선택기는 동급 그룹에서 그 유형의 마지막 요소를 찾습니다. 이 예에서 단어 'List' 는 녹색입니다.그러나 :last-child 형제조에서 두 번째 요소를 찾았다. 왜냐하면 우리는 2를 통과했기 때문이다.그것은 '예' 라는 단어를 파란색으로 변하게 할 것이다.

FUN FACT: You can also pass in the words "even" or "odd" into an :nth-child() selector, which is especially handy when styling tables. tr:nth-child(even) will apply to every even-numbered row in a table.

9. 입력 검증
많은 사람들이 폼 검증은 반드시 JS로 이루어져야 한다고 생각하지만, 실제로는 위류가 강하기 때문에 CSS에서 많은 일을 할 수 있다!
CSS

input:out-of-range { color: red; } 
input[type="checkbox"]:checked + label { color: green }

HTML

<form> 
   <div>
     <input type="checkbox" id="check">
     <label for="check">Checkbox</label>
   </div>
   <div>
   <label for="value1">Number</label>
   <input id="value1" type="number" min="1" max="10">
</form> 

여기에 우리는 매우 간단한 예시표가 하나 있다.Google의 위조 클래스는 사용자가 입력한 값이 검사 또는 범위를 초과했는지 여부에 따라 폼 스타일을 조건부로 설정하는 데 도움을 줍니다.상태 또는 백엔드 유효성 검사를 처리할 필요가 없습니다. CSS에 있습니다!입력 검증과 관련된 위조류도 많은데 :nth-child(2),:invalid,:in-range 등이 있다.Check them out!
이 목록이 테두리에서 벗어나 CSS에서 새로운, 더 복잡한 선택기를 시도할 수 있도록 격려해 주길 바랍니다!보시다시피, 그것들은 각자 유용하지만, 그것들을 결합시켜 구체적으로 범위를 좁히기 시작하면, 그것들은 확실히 빛을 발하고, 매번 새로운 종류를 쓸 필요가 없다.CSS 선택기의 예술을 습득하여cascade가 당신을 위해 일을 완성하도록 합니다!