12가지 고급 CSS 선택기!!|(두 번째 부분)🎉)

여보게, 친구들, 두 번째 부분에서 너희들을 다시 볼 때가 되었구나😍. 첫 부분에서 새로운 개념을 많이 파악했으면 좋겠어요.두 번째 부분은 7가지 유형의 속성 선택기와 완전히 관련된다!!.

If you not noticed the part-1, don't worry just relax explore the part-2 then move to and I'm not rush you which is completely based on your pace.

[attr]

[attr=value]

[attr~=value]

[attr |=value]

[attr^=value]

[attr$=value]

[attr*=value]

위쪽을 보니 느낌이 좀 이상하다.별거 아니야.내가 여기 온 것은 너의 CSS 생활을 더욱 가볍게 하기 위해서다.그래서 아래층의 글을 계속 읽고 싶습니다.😉.

Every attribute selector should be in square-bracket[ ]

유형 1-[attr]

속성 이름이 attr인 원소를 나타낸다.

<a href="http://example.com" target="_blank">I'm External Link😎</a>
<a href="#internal">I'm internal link🙄</a>

[target]{
    color: orange;
}
/* attribute selector can also be specify with their element name */
a[target]{
    color: orange;
}

위의 스타일은 targe 표시에 a 속성이 존재하면 스타일을 적용한다는 것을 암시한다.희망은 보람이 있다.만약 네가 약간의 연습이 필요하다고 생각한다면 망설이지 말고 아래의 코드 펜에서 마음대로 놀아라.

Real time situation - Some situations like need to imply the user that some links are linked to external resources. At that time, Use a[target]

유형 2 - [attr=value]

속성 이름이attr인 요소를 나타내는데 그 값은 주어진 값과 같다.

In simple words, Attribute Exactly Equals Certain Value.

    <a href="https://example.org" target="_blank">Yes, I'm😎</a>
    <a href="#internal">Oops, I'm not😣</a>

/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

위의 예는 만약에 a 표기가 href 속성을 포함한다면 이 속성은 바로 "https://example.org" 값과 같으면 스타일만 적용된다는 것을 설명한다.아이디어가 있었으면 좋겠어요. 코드 펜 연습을 했으면 좋겠어요.
상기 두 가지 선택기는 문제가 없을 것 같다.곧 다가올 사람은 더 이상 번거롭지 않을 것이다.그러나 그들은 약간 교활하다. 그들은 자신의 행동을 이해하기 위해 더 많은 관심을 얻기를 바란다.

유형 3-[attr~=value]

속성 이름이attr인 요소를 나타내며 값은 공백으로 구분된 단어 목록입니다.

Simply like Attribute Value is in Space-Separated List

<img src="//placehold.it/150/150" alt="abstract art">
  <img src="//placehold.it/150/150" alt="something to eat">
  <img src="//placehold.it/150/150" alt="athlete starting a new sport">

img[alt~="art"] {
  border: 3px solid lightgreen;
}

위의 예에서 이것은 결코 재미있지 않다.그러니 용서해 주십시오. 비록 이 개념을 분명히 하겠다고 약속하지만.우리는 alt 속성에 예술이라는 단어가 있는 그림을 선택했다. 이 그림들은 유일한 값이거나 완전한 단어로 빈칸이 구분된 목록에 나타난다.여보시오, alt의 텍스트가 있는 '운동선수가 새로운 운동을 시작한다' 는 그림은 윤곽이 없습니다.그러나 이 alt 텍스트의'추상 예술'이미지는 그려졌다.희망은 보람이 있다.

유형 4-[attr|=값]

속성 이름이attr인 요소를 표시하는데 그 값은value일 수도 있고value로 시작하여 문자를 붙일 수도 있습니다.만약 네가 나의 관점을 이해할 수 없다면, 그것은 전혀 상관없다. 계속 아래로 읽어라.예를 통해 너는 매우 명확한 생각을 얻을 수 있을 것이다.

Rephrase the above definition in simple words like Attribute value starts with this in a dash-separated list.

예를 들어,

 <ul>
    <li data-years="1800-1900">The 19th Century</li>
    <li data-years="1900-2000">The 20th Century</li>
    <li data-years="2000-2100">The 21st Century</li>
 </ul>

/* attr|=value */
li[data-years|="1900"] {
  color: red;
}

위의 예제에서는 "1900"을 대시로 구분된 목록의 고유한 값 또는 첫 번째 값으로 선택한 data-years 속성의 목록 항목을 보여 줍니다.두 번째 목록 항목만 선택했습니다.첫 번째 목록 항목의 데이터 속성 값에는 "1900"이 있지만 대시 뒤에 있습니다. 즉, 선택기가 일치하는 값이 대시로 구분된 값 목록에서 고유한 값이나 첫 번째 값임을 의미합니다.
여보게, 여전히 나와 함께 있구나. 연수 중의 인내심에 감복하며, 축하하네🎉🎉 네가 까다로운 개념을 깨뜨렸기 때문에 나머지 사람들은 쉽게 이해할 수 있다.

유형 5 - [attr^=value]

속성 이름이attr인 요소를 표시하고 그 값의 접두사(전면)는value이며 속성 값은 선택한 용어로 시작한다는 것을 의미한다.이 선택기를 사용하려면 등호 앞에 삽입 기호(^)를 추가합니다.대소문자를 구분하는 것이 중요하다.

Attribute Begins with Certain Value

예를 들어,

  <img src="//placehold.it/150/184/abstract" alt="artistic pattern">
  <img src="//placehold.it/150/184/food" alt="a healthy meal">
  <img src="//placehold.it/150/184/sports" alt="Arthur Miller">

img[alt^="art"] {
  /* alt attribute starts with the value "art" */
  border: 3px solid #e18728;
}

위의 예는 우리가 alt 텍스트가'예술'로 시작하는 이미지를 선택했다는 것을 의미한다.alt 텍스트 "Artical pattern"이 있는 이미지를 선택했지만 "Arthur Miller"텍스트가 있는 이미지는 속성 선택기가 대소문자를 구분하기 때문이 아닙니다.

6형-alt

속성 이름이attr인 요소를 나타내고 그 값은value를 접미사로 하고,value는 속성 값이 선택한 용어로 끝납니다.이 선택기를 사용하려면 등호 앞에 달러 기호($)를 추가합니다.

Similar to type-5. In type-5(^) which check the match in start but in type-6($) which check the match in end

  <h2>[attr$=value]</h2>
  <a href="example.pdf" target="_blank">I'm pdf file😉</a>
  <a href="#internal">hm, I'm a link😒</a>

[href$="pdf"]{
  background: white;
  color: brown;
  text-decoration: none;
  padding: .5em;
  border-radius: 2em;
  display: inline-block;
}

앞의 예에서, 우리는 'pdf' 로 끝나는 [attr$=value] 링크를 선택한 다음 스타일을 적용합니다.
나는 네가 코드pen에서 연습하고 실험하는 것을 건의한다.
너의 책임감을 자랑스럽게 여기다🥳🥳, 속성 선택기의 최종 유형에 도달했습니다

유형 7 -href

속성 이름이 attr인 요소를 나타내며, 그 값은 문자열에 최소한 한 번의 값을 포함한다

It simply means value need not to be in start or end or space-seprated or dash seperated, which expect Attribute Contains Certain Value anywhere.

  <h2>[attr*=value]</h2>
  <img src="//placehold.it/150/150" alt="abstract art">
  <img src="//placehold.it/150/150" alt="something to eat">
  <img src="//placehold.it/150/150" alt="athlete starting a new sport">

/* [attr*=value] */
img[alt*="art"] {
  border: 3px solid lightgreen;
}

여기에서, 우리는 [attr*=value] 텍스트에 완전한 단어나 단어의 단편인'art'가 있는 그림을 선택하고, 그것들의 윤곽을 보여 줍니다.alt 텍스트가'추상 예술'과'운동선수가 새로운 운동을 시작한다'는 이미지에 윤곽이 있음을 주의하십시오.네가 이 생각을 이해할 수 있기를 바란다.
이렇게 긴 블로그를 너는 아마 피곤함을 느낄 것이다😅. 그러니까 좀 쉬어라, 네 머리를 좀 맑게 해라.나는 이것이 너에게 주는 보상이라고 생각한다. 왜냐하면 너의 인내심으로 너는 정말로 목적지로 가는 완벽한 길을 걷게 되었기 때문이다.나는 너를 도와 시간을 절약하고 싶다. 그래서, 나는 코드pen의 모든 선택기를 포함한다. (마치 치즈 종이와 모든 선택기의 시범처럼.)
만약 네가 이 블로그를 좋아한다면, 귀여운 마음을 바쳐라💝이 블로그에 대한 너의 생각을 내려놓아라😍 이것은 나에게 정말 중요하다.나는 네가 불편하다고 느끼는 스타일링 개념이나 의문이 있다면 너와 토론하는 것을 좋아한다.
읽어주셔서 감사합니다!!
프리시
- 당신의 삶을 더 편하게 만들어요