당신이 모를 수도 있는 유용한 CSS 선택기

CSS 선택기는 웹 개발에서 중요한 역할을 하며 웹페이지 스타일 지정에 사용됩니다. 많은 사람들이 공통 선택기에 익숙하지만, 덜 일반적이지만 매우 유용한 선택기도 있습니다.

CSS 선택자란 무엇입니까?

CSS 선택기는 스타일 지정을 위해 웹페이지에서 요소를 선택하는 데 사용되는 패턴입니다. 속성, 클래스, ID 등을 기반으로 요소를 찾을 수 있습니다.

자주 사용되는 CSS 선택자

다음은 일반적으로 사용되는 선택기입니다.

• 요소 선택기: 특정 유형의 모든 요소를 ​​대상으로 합니다. 예를 들어 모든 <div> 요소의 스타일을 지정하려면 다음을 사용하세요. <pre class="brush:php;toolbar:false">&lt;code&gt;div { border: 1px solid black; }&lt;/code&gt;</pre> <ul> <li> <strong>클래스 선택기</strong>: 특정 클래스를 가진 요소를 선택합니다. "text-large"라는 클래스가 있는 경우: </li> </ul> <pre class="brush:php;toolbar:false">&lt;code&gt;.text-large { font-size: 20px; }&lt;/code&gt;</pre> <ul> <li> <strong>ID 선택기</strong>: 특정 ID를 가진 요소를 대상으로 합니다. ID가 "header"인 요소의 경우: </li> </ul> <pre class="brush:php;toolbar:false">&lt;code&gt;#header { background-color: blue; }&lt;/code&gt;</pre> <ul> <li> <strong>속성 선택기</strong>: 특정 속성 값을 가진 요소에 사용됩니다. 예를 들어, 모든 외부 링크의 스타일을 지정하려면("rel" 속성 사용): </li> </ul> <pre class="brush:php;toolbar:false">&lt;code&gt;a[rel=&quot;external&quot;] { color: red; }&lt;/code&gt;</pre> <h2 id="흔하지-않지만-유용한-CSS-선택기">흔하지 않지만 유용한 CSS 선택기</h2> <h3 id="하위-선택기-gt">하위 선택기(>)</h3> <p>요소의 직계 하위 요소를 찾습니다. 클래스가 "컨테이너"인 상위 요소의 경우: </p> <pre class="brush:php;toolbar:false">&lt;code&gt;.container &gt; p { margin-left: 10px; }&lt;/code&gt;</pre> <h3 id="하위-선택자">하위 선택자( )</h3> <p>이렇게 하면 요소 내의 모든 하위 항목이 선택됩니다. ID가 "main"인 div가 있고 그 안에 있는 모든 <code><span></span> 요소의 스타일을 지정하려는 경우:

  <code>#main span {
    color: green;
  }</code>

  인접 형제 선택자( )

  다른 특정 요소 바로 뒤에 오는 요소를 선택합니다. 예를 들어 <h3></h3> 요소 뒤에 <p></p> 요소가 있는 경우:

  <code>h3 + p {
    font-weight: bold;
  }</code>

  범용 형제 선택자(~)

  반드시 인접할 필요는 없지만 다른 요소의 형제 요소를 배치합니다. "item" 클래스가 있는 div가 있고 "detail" 클래스로 모든 후속 형제 요소의 스타일을 지정하려는 경우:

  <code>.item ~ .detail {
    padding-top: 5px;
  }</code>

  부분 일치(^=, $=, *=)를 사용하는 속성 선택기

  • 다음으로 시작(^=): "https://www.php.cn/link/e2e1cbe72ab1192e395c35295763982a"으로 시작하는 모든 이미지 소스의 스타일을 설정하려면:

  <code>img[src^="https://www.php.cn/link/e2e1cbe72ab1192e395c35295763982a"] {
    border-radius: 5px;
  }</code>

  • ($=)으로 끝납니다: 메소드가 "post"로 끝나는 모든 양식의 경우:

  <code>form[method$="post"] {
    background-color: #f0f0f0;
  }</code>

  • *포함(=)**: href 속성에 "제품"이 포함된 모든 링크의 스타일을 지정하려면:

  <code>a[href*="product"] {
    text-decoration: underline;
  }</code>

  부정 의사 클래스(:not())

  특정 선택자와 일치하지 않는 요소를 선택합니다. 예를 들어 "hidden" 클래스가 있는 요소를 제외한 모든 요소:

  <code>:not(.hidden) {
    display: block;
  }</code>

  대상 의사 클래스(:target)

  URL 조각이 요소의 ID와 일치하는 경우. ID가 "contact"인 URL 부분:

  <code>div {
    border: 1px solid black;
  }</code>

  언어 의사 클래스(:lang())

  언어 속성을 기준으로 요소를 찾습니다. lang="en-US"인 요소의 경우:

  <code>.text-large {
    font-size: 20px;
  }</code>

  의사 클래스(:has())가 있음

  :has() 의사 클래스는 특정 하위 요소나 하위 요소를 포함하는 요소를 선택하는 데 사용됩니다. 예를 들어, 이미지가 포함된 div의 스타일을 지정하려면 다음을 수행하세요.

  <code>#header {
    background-color: blue;
  }</code>

  선택 의사 클래스(::selection)

  이 의사 클래스를 사용하면 사용자가 선택한 텍스트 부분의 스타일을 지정할 수 있습니다. 예를 들어 사용자가 단락에서 일부 텍스트를 선택한 경우:

  <code>a[rel="external"] {
    color: red;
  }</code>

  결론

  이러한 흔하지 않은 CSS 선택기는 요소를 정확하게 배치하고 스타일을 지정하는 추가 방법을 제공합니다. CSS 코드의 유연성과 기능을 향상시켜 시각적으로 매력적이고 구조가 잘 구성된 웹 페이지를 더욱 강력하고 효율적으로 만듭니다.

  자세한 내용은 https://www.php.cn/link/8dacd3d8b9d2cd20eb244b5f745ea88e

  를 참조하세요.