일반 장면용 고급 CSS 선택기

작성자 Andrew Spencer✏️
CSS가 이상해.이것은 웹 개발자가 사용하는 다른 언어와 다르지만, 웹 사이트의 시각적 표시 (사용자와 상호작용하는 부분) 에 매우 중요하다.CSS의 가장 기본적인 형식은 매우 간단하다.예를 들어, background-color: red 는 배경이 빨간색임을 나타냅니다.그러나 대형 CSS 코드 라이브러리를 연구한 사람은 누구나 곧 매우 복잡하고 곤혹스러워질 것이라고 알려줄 것이다.
CSS Grid, BEM, Dart Sass, CSS에 관해서는 항상 새로운 것을 배워야 한다.너무 좋아요!새로운 내용을 보기보다는 CSS의 기본 구축 블록selector에 주목해야 한다.선택기와 어떻게 더 높은 방식으로 사용하는지 더 잘 이해하면 더 적은 코드와 더 깨끗한 CSS로 일반적인 장면을 해결할 수 있습니다.

무엇이 선택기입니까?

우리들은 우리의 관점이 일치한다는 것을 확보합시다.ACSS selector는 브라우저에서 속성을 적용하는 방법을 알려주는 요소입니다.그것들은 하나의 HTML 요소에만 적용되는 일반적인 요소일 수도 있고, 큰 그룹 요소에 적용될 수도 있고, 더욱 구체적일 수도 있다.5개types of selectors:

Simple selectors HTML 세션(예: div, #id 또는 .class 선택

Combinator selectors "자"p > div 또는 "인접 형제"div + div 같은 코드 관계 기반

Pseudo-class selectors 요소의 특정 상태(예: :hover, :first-child 또는 :nth-of-type 선택

Pseudo-elements selectors 요소의 특정 부분(예: ::after, ::selection 또는 ::first-letter을 선택합니다.단일 콜론

을 사용하는 위조 선택기에 비해 항상 이중 콜론 기호::를 사용합니다.

Attribute selectors, [class|="class-name"], [type="text"] 또는 [target] 등 특정 속성이 있는 요소를 선택합니다.

두 개의 개별 선택기를 사용하여 동일한 요소 선언 스타일을 지정하면 CSS 파일의 순서에 관계없이 보다 구체적인 선택기가 승리합니다.예를 들어, 클래스 선택기.class-name는 일반 HTML 요소 선택기span보다 구체적입니다.브라우저에서 적용할 CSS 스타일을 결정하는 방법을 다시 알고 싶다면CSS cascade
기왕 우리가 선택기가 무엇인지 알게 된 이상, 우리는 그것들을 어떻게 효과적으로 사용하는지 깊이 있게 이해하자.당신은 잘 알려지지 않은 선택기를 이용할 수 있으며, 심지어는 그것들을 한데 조합하여 필요한 코드의 양을 줄일 수 있습니다!다음은 제가 CSS에서 사용하는 더 높은 선택기들입니다.
quiz.

: n 마지막 하위 항목(-n+2)

여러 CSS 위조 클래스 선택기는 관련 요소 또는 상위 요소의 하위 요소 그룹에서 요소를 선택할 수 있습니다.

<parent>
    <child></child>
    <child></child>
</parent>

、 :first-child 、 :nth-child 、 :nth-of-type 가 있습니다.숫자n 계수기, odd 또는 even 를 사용하여 이 선택기를 표현식으로 변환하면 더욱 강력해진다.너는 수학을 통해 한 그룹의 모든 원소를 선택할 수 있다.예를 들어 n 는 대수 표현식을 만드는 방법이다.따라서 (2n+4) 는 (2*n)+4 와 같고, 네 번째 요소부터 다른 각 요소를 선택합니다.

(2*0)+4 = 4
(2*1)+4 = 6
(2*2)+4 = 8
(2*4)+4 = 10

이것은 많은 장면에서 매우 유용하다.예를 들어, 목록의 마지막 두 항목에만 스타일을 설정해야 했습니까?이 두 요소에 클래스를 추가하면 HTML과 CSS가 더 많이 생성되거나 다음 그림과 같이 단일 CSS 선택기를 사용할 수 있습니다.

.item:nth-last-child(-n+2)

이 선택기를 "선택.item의 마지막 두 하위 항목"으로 읽을 수 있습니다어떻게 작동하는지 봅시다. -n+2 는 (-0+2)=2 또는 꼴찌 두 번째 항목, 그리고 (-1+2)=1 또는 마지막 항목, 그리고 (-2+2)=0 어떤 내용도 선택하지 않은 다음 (-3+2=-1) 다시 어떤 내용도 선택하지 않은 것으로 미루어 자원소의 총수를 얻습니다.n 앞의 마이너스 번호가 카운트다운을 하기 때문에 두 개의 원소만 선택했습니다.마지막 세 가지를 선택하고 싶다면, -n+3 이렇게 한다.HTML에 내용을 추가하지 않고도 이러한 요소를 선택할 수 있습니다!

목록 계속 : 아니요(: 마지막 하위 항목)

마지막 예시를 이해하기 위해 :last-child 와 :not 선택기를 결합하여 사용할 수 있습니다.이것은 그룹의 마지막 요소가 서로 다른 스타일을 가진 상황을 해결하는 데 도움이 된다.사이트는 보통 항목 목록을 필요로 하는데, 목록 사이에 약간의 공백이 남아 있다.이 장면의 흔히 볼 수 있는 문제는 그룹의 마지막 항목 아래의 간격을 삭제해야 한다는 것이다.

일반적으로 CSS를 사용할 때 가장 흔히 볼 수 있는 장면에 스타일을 설정한 다음에 더욱 구체적인 선택기를 사용하여 어떤 외곽 장면도 설명하면 자연스러움을 느낄 수 있다.그런 다음 더 특정한 선택기의 스타일은 더 일반적인 선택기의 스타일을 덮어씁니다.이 예제에서는 다음과 같은 결과를 초래할 수 있습니다.

.image {
  margin-bottom: 2rem;

  &:last-child {
    margin-bottom: 0;
  }
}

또는 HTML에 새로운 클래스를 추가하기 위해 를 사용했을 수도 있습니다.다음과 같은 기능을 제공합니다.

.image {
  margin-bottom: 2rem;
}

.image--last {
  margin-bottom: 0;
}

이 두 경로는 모두 일곱 줄 코드와 다시 쓰는 속성을 생성할 것이다.이것은 결코 무섭지 않지만, CSS를 프로그래밍 언어로 여기고 논리'프로그래밍'을 선택기에 넣으면 CSS를 다음과 같이 간소화할 수 있습니다.

.image:not(:last-child) {
  margin-bottom: 2rem;
}

위의 선택기를 읽으십시오. "선택은 마지막 하위 그림이 아닙니다."세 줄 코드, 덮어쓰기 스타일이 없어요. 괜찮아요!

경계 메타CSS 구조 요소: 서스펜션 + 동급 인접

서로 다른 장면의 정지 상태를 봅시다.서스펜션된 엔티티와 다른 엔티티를 조정해야 하는 경우가 있습니다.자바스크립트에서 이것은 상당히 간단하다. 왜냐하면 자바스크립트는 특정 요소 를 쉽게 검색할 수 있기 때문이다.그러나 HTML 구조가 올바르면 CSS만 필요합니다.
CSS를 사용하면 traversing the DOM 예를 들어, .parent > .child 또는 .element + .general-sibling 를 사용하여 다른 요소에 대해 작업할 수 있습니다.CSS가 할 수 없는 일은 서스펜션 요소의 부모 요소인 요소를 겨냥하는 것입니다.다음은 CSS에서 사용할 수 있는 객체에 대한 설명도입니다.

<div>
  <a>
    The element that is hovered
    <span>This is a child, CSS can style this</span>
  </a>
  <span>This is a sibling, CSS can style this</span>
  The "parent" <div> cannot be styled with CSS when the <a> is hovered
</div>

강력한 동급 선택기는 어떻게 사용합니까?두 개의 동급 요소가 있고 두 번째 요소의 스톱 상태 스타일을 설정해야 하는 경우 다음과 같이 할 수 있습니다.
양식 필드에도 동급 선택기를 사용할 수 있습니다.label:hover + input 선택기를 사용하여 <label> 요소와 상호작용하여 <input> 요소를 강조 표시할 수 있습니다. 이 요소는 <label> 이후의 형제입니다.

조합 선택기 네 차례야

다음에 CSS가 저급한 언어라고 생각할 때 다시 생각해 보세요.그냥 달라요.이것은 사람을 낙담하게 할 수도 있고, 유익할 수도 있다. 이것은 당신의 관점에 달려 있다.CSS 사용을 포기하고 더 많은 HTML을 추가하거나 자바스크립트로 모든 것을 파괴하기 전에 사용할 수 있는 CSS 선택기와 속성을 보십시오.당신의 요구를 만족시킬 수 있는 방법이 있을 것입니다.

당신의 프런트엔드가 사용자의 CPU를 점용했습니까?

웹 전단이 갈수록 복잡해지면서 자원 탐욕의 기능이 브라우저에 대한 요구가 높아지고 있다.운영 중인 모든 사용자를 위해 클라이언트 CPU 사용량, 메모리 사용량 등을 모니터링하고 추적하는 데 관심이 있는 경우
try LogRocket.
인터넷 응용 프로그램의 DVR처럼 당신의 인터넷 응용 프로그램이나 사이트에서 발생하는 모든 것을 기록합니다.중요한 프런트엔드 성능 지표를 수집하여 보고하고, 사용자 세션과 응용 프로그램 상태를 재생하고, 네트워크 요청을 기록하며, 문제의 원인을 추측하지 않고 모든 오류를 자동으로 표시할 수 있습니다.
디버그 웹 응용 프로그램 업데이트 방법 - LogRocket
게시물Start monitoring for free.이 먼저 Advanced CSS selectors for common scenarios에 올라왔다.