안녕하세요.👋‍, 제 시리즈로 돌아온 걸 환영합니다Getting Comfortable With CSS Selectors,
만약 이것이 당신이 읽고 있는 시리즈의 첫 번째 문장이라면, 시리즈에서 계속 관심을 가지기 위해 제 이전 문장Getting Comfortable With CSS Selectors (Part 1)을 보십시오😉.
본 논문에서 우리는 본 시리즈의 첫 번째 부분의 내용부터 시작하여 CSS의 일부 선택기를 토론할 것이다.우리는 Pseudo-Classes와 Pseudo-Elements CSS 선택기를 주목할 것이다.멋있게 들리죠?시작해보도록 하겠습니다.👇.

괴뢰

CSS pseudo-classes are not exactly selectors on their own, they are keywords added to a CSS selector and let developers specify a special state of the selected element(s).

All Pseudo-class selectors in CSS are preceded by a colon :.

1.X: 오버헤드

/* Any button over which the user's pointer is hovering */
a:hover {
  color: pink;
  text-decoration: blue;
}

가장 자주 사용하는 위류 중 하나는 :hoverpseudo-class로 정지 상태(when the user hovers our them with a pointing device, usually a mouse)의 요소를 설정하는 데 사용되는 양식이다.
그래서 이 예에서 모든 링크가 정지될 때 우리는 그것을 분홍색으로 만들어 준다.사용자가 마우스를 원소 위에 놓을 때 특정한 스타일을 적용하시겠습니까?이것은 일을 완성시킬 것이다.👍.

2.X: 집중

 /* Selects any <input> with the field class when focused */ 
input.field:focus {
  border: 2px solid blue;
}

:focus CSSpseudo-class는 초점(키보드나 마우스 이벤트 또는 다른 형식의 입력을 수락)을 받은 요소(일반적으로 폼 입력)를 나타낸다.
코드 펜에서 :focuspseudo-class는 red-classclass에 입력할 때 blue-classclass에 빨간색 배경과 파란색 배경을 제공하는 데 사용된다.

3 X: n번째 유형(n)

/* Selects every second <p> element among any group of siblings */
div p:nth-of-type(2n) {
  color: lime;
}

:nth-of-type() CSSpseudo-class는 요소가 같은 그룹의 요소 중 위치에 따라 주어진 유형의 요소(선택기)를 선택한다.
가령 우리가 ul를 가지고 있다면 목록에 있는 숫자의 위치가 짝수인 각li에 스타일을 설정하고 싶습니다. 그들에게 특별한 class를 줄 필요가 없습니다. 우리는 :nth-of-type()pseudo-class 선택기를 사용하여 실현할 수 있습니다!
목록에 있는 숫자의 위치가 이상한 사람들은요, 우리는 이미 그것을 안에 포함시켰습니다.

4.X: 첫 번째

:first-of-typepseudo-class와 :nth-of-type(1)는 같다.상위 요소의 하위 요소 목록에서 해당 유형의 첫 번째 형제 요소를 나타내는 요소입니다.
따라서 만약에 첫 번째li에 동급과 다른 스타일을 만들고 싶다면 :first-of-type 위류를 사용하여 이 점을 쉽게 할 수 있다.

5.X:참관

/* Selects any <a> that has been visited */
a:visited {
  color: purple;
}

일부 사이트에서는 일반적으로 사용자가 방문한 링크에 특수한 양식을 적용하여 사용자가 페이지로 돌아갈 때 이미 방문한 외부 링크를 알 수 있다.
이것은 :visited CSSpseudo-class를 통해 실현할 수 있다. 왜냐하면 이 스타일은 사용자가 방문한 링크에만 적용되기 때문이다.

위원소

저희가 또 다른 재미있는 팀이 있어요. pseudo-elementsCSSpseudo-elements는 선택기에 추가된 키워드로서 선택한 요소의 특정 부분에 대한 스타일을 설정합니다.
알아요, 알아요. CSSpseudo-classes처럼 보이죠?🤔. 그것들 사이에는 두 가지 주요 차이가 있다

pseudo-elements are preceded with two colons :: instead of one, although these days modern browsers are more forgiving and support both single : and double :: colons for the pseudo-elements. But it is a best practice to use two colons :: 😏

pseudo-classes are all about state, when we speak of state, I mean things like a visited link, a focused input field, an image that is being hovered upon, etc. While pseudo-elements are used to style sections or a particular part of of an element, things like the first letter in a word, the first line, etc.

6.X:: 첫 번째 문자(: 첫 번째 문자)

::first-letter는 이미지나 표 뒤에 없는 한 블록 레벨 요소의 첫 번째 행의 첫 번째 문자를 나타냅니다.

selector::first-letter {
  property: value;
}

우리는 ::first-letter의 위조 요소를 사용하여 각각의 <p>의 첫 번째 자모를 300%와 핑크색으로 바꿀 수 있다😁.

7.X:: 선택(: 선택)

selector::selection {
  property: value;
}

::selectionpseudo-element는 강조 표시된 문서 섹션을 선택하고 해당 스타일을 설정하는 데 사용됩니다.이것은 매우 재미있는 위조 원소 선택기다.
따라서 브라우저의 기본 스타일, 즉 웹 사이트에서 텍스트를 선택/강조 표시할 때 텍스트를 적용하고 사용자 정의 스타일을 적용하려면 ::selectionpseudo-element를 사용하여 쉽게 할 수 있습니다.

8.X::before(:before) 및 X:after(:after)

::before와 ::afterpseudo-elements는 속성CSS content을 사용하여 선택한 요소의 실제 내용을 둘러싸고 스타일을 설정할 수 있는 내용을 생성합니다.
우리는 선택기를 선택했습니다. 그 다음에 content 속성에 값을 주고, 값에 지정한 모든 내용을 Html의 선택기 앞이나 뒤에 추가합니다.

`X::before (:before):` Represents a styleable child pseudo-element immediately before the originating element's actual content.

`X::after (:after):` Represents a styleable child pseudo-element immediately after the originating element's actual content.

기본적으로 ::before와 ::afterpseudo-elements는 DOM의 다른 요소처럼 스타일 설정과 수정을 할 수 있는 내연 요소를 만듭니다.이것은 우리로 하여금 재미있는 효과를 창조하는 것을 통제할 수 있게 한다.

🚨 Note the ::before and ::after pseudo-element selectors should only be used to add cosmetic and stylistic content on our page. True content that is actually important for the page should be added to your page's markup.

다음은 제가 Codepen에서 찾은 ::before와 ::afterpseudo-element를 사용한 예입니다.

결론

자, 인코딩자, 이제 이 시리즈의 끝입니다. 우리는 이 시리즈에서 CSS 선택기에 관한 많은 내용을 소개했습니다!🎉🎉🥂.
CSS 선택기에 대한 자세한 설명은 다음 리소스의 일부를 참조하십시오.

MDN guide

MDN Pseudo-classes

MDN Pseudo-elements

만약 네가 원한다면, 나는 하나 있다Little Exercise On Codepen😏 네가 이 시리즈의 문장에 대한 이해를 시험해 보아라.따라서 Html 스타일을 설정하려면 CSS 패널의 주석 설명을 사용하십시오.이것은 Codepen Solution끼지 않도록🙂.
그렇다면 당신은 아직도 무엇을 기다리고 있습니까? 이 지식을 가지고 나가서 일류의 CSS 스타일을 써서 당신의 친구에게 깊은 인상을 남기세요.💃💃.

읽어주셔서 감사합니다!❤ 계속 인코딩!👨‍💻.
당신의 친구와 그것을 공유하고 좋아하며 언제든지 나를 주목해라. 그러면 다시는 나의 최신 문장을 놓치지 않을 것이다.