CSS

Css선택자_속성 선택자 기초

dd-frontend 2024. 5. 28. 20:49

속성 선택자(Attribute Selector)

속성 선택자는 태그, 클래스, 아이디로 선택한 요소들을 태그 속성 값으로 구체적으로 필터링을 하기 때문에 선택 범위를 구체화할 수 있다.

[속성명]

📌 속성이 있는 모든 요소를 선택한다.
체크박스 / 라디오 버튼의 체크 속성을 사용하면 체크된 입력 필드 라벨만 CSS를 적용할 수 있다.
값의 유무는 상관없이 속성명의 여부에 따라 결정됨.

ex> GitHub을 제외한 <a>태그들만 스타일이 적용된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attribute Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Attribute Selector Example</h1>
<a href="https://www.example.com" target="_blank">Example</a>
<a href="https://www.google.com" target="_self">Google</a>
<a href="https://www.openai.com" target="_blank">OpenAI</a>
<a href="https://www.github.com">GitHub</a>
</body>
</html>

a[target] {
    color: green;
    text-decoration: none;
}

[속성명=값]

📌 속성이 있고, 정확히 일치하는 속성값이 있는 모든 요소를 선택한다.
속성값이 정확하게 일치해야 하기 때문에 ,
공백으로 여러 개의 속성 값이 들어있는 경우 매치되지 않음.

[속성명*=값]

📌 속성이 있고 "값"이 속성 값에 포함되어 있으면 선택한다.
⛔️ 큰 HTML 문서에서는 CSS 선택자로 선택하는 동안 화면 갱신이 그만큼 느려질 수 있으므로 너무 광범위하게 속성 값을 정하는 것은 좋지 않다.

ex.
: input[type="text"] 선택자는 type 속성이 정확히 "text"인 모든 <input> 요소를 선택합니다. - Green

: input[type="text"] 선택자는 type 속성에 *"text" 문자열이 포함**된 모든 <input> 요소를 선택합니다. - Blue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attribute Selector Warning Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Attribute Selector Warning Example</h1>
<input type="text" placeholder="Enter text here">
<input type="text-field" placeholder="Enter something">
</body>
</html>

input[type="text"] {
    border: 2px solid green;
}

input[type*="text"] {
    border: 2px solid blue;
}

[속성명~=값]

📌 속성이 있고, 속성값이 정확히 일치하거나 속성 값이 공백으로 구분된 여러 개의 값으로 표현된 경우 그중 하나의 값으로 선택할 수 있다.

코드 설명
: [class~="red"] 선택자는 class 속성 값이 red 단어를 포함하는 모든 요소를 선택합니다. 이 요소들의 테두리를 빨간색으로 설정합니다.

: [class~="large"] 선택자는 class 속성 값이 large 단어를 포함하는 모든 요소를 선택합니다. 이 요소들의 테두리를 dodgerblue색으로 설정합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attribute Selector ~= Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Attribute Selector ~= Example</h1>
<div class="box red large">Red Large Box</div>
<div class="box blue large">Blue Large Box</div>
<div class="box red small">Red Small Box</div>
<div class="box green medium">Green Medium Box</div>
</body>
</html>
[class~="red"] {
    border: 2px solid red;
    margin-bottom: 5px;
}
[class~="green"] {
    border: 2px solid green;
    margin-bottom: 5px;
}
[class~="large"] {
    border: 2px solid dodgerblue;
    margin-bottom: 5px;
}

[속성명|=값]

📌 속성이 있고, 속성 값이 정확하게 일치하거나 "값"+"-"인 요소를 선택한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attribute Selector |= Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Attribute Selector |= Example</h1>
<p lang="en">This paragraph is in English.</p>
<p lang="en-US">This paragraph is in American English.</p>
<p lang="en-GB">This paragraph is in British English.</p>
<p lang="fr">Ce paragraphe est en français.</p>
<p lang="es">Este párrafo está en español.</p>
</body>
</html>

p[lang|="en"] {
    color: dodgerblue;
    font-weight: bold;
}

[속성명^=값]

📌 속성이 있고, 속성 값이 '값'으로 시작하는 요소를 선택한다.

코드설명
: [href^="https"] 선택자는 href 속성 값이 "https"로 시작하는 모든 <a> 요소를 선택합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attribute Selector ^= Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Attribute Selector ^= Example</h1>
<a href="https://www.example.com">Example Link 1</a>
<a href="https://sub.example.com">Example Link 2</a>
<a href="http://www.test.com">Test Link 1</a>
<a href="https://www.test.com">Test Link 2</a>
<a href="ftp://ftp.example.com">FTP Link</a>
</body>
</html>

a[href^="https"] {
    color: green;
    font-weight: bold;
}

[속성명$=값]

📌 속성이 있고 속성 값이 '값'으로 끝나는 요소를 선택한다.

코드설명
: [href$=".pdf"] 선택자는 href 속성 값이 ".pdf"로 끝나는 모든 <a> 요소를 선택합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attribute Selector $= Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Attribute Selector $= Example</h1>
<a href="document.pdf">PDF Document</a>
<a href="image.jpeg">JPEG Image</a>
<a href="archive.zip">ZIP Archive</a>
<a href="report.pdf">PDF Report</a>
<a href="presentation.ppt">PPT Presentation</a>
</body>
</html>
a[href$=".pdf"] {
    color: red;
    font-weight: bold;
}

다중 속성 선택자로 선택

📌 속성 선택자는 여러 개를 붙여서 나열해 중복 조건을 설정할 수 있다.
중복 나열된 속성 선택자는 AND 조건으로 나열한 모든 조건을 만족하는 요소만을 선택한다.

코드설명
:href 속성이 https로 시작하고,
target 속성이 _blank이며,
class 속성이 external인
<a> 요소를 선택하여 스타일을 적용.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Attribute Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Multiple Attribute Selector Example</h1>
    <a href="https://www.example.com" target="_blank" class="external">Example Link 1</a>
    <a href="https://www.google.com" target="_self" class="external">Google Link</a>
    <a href="https://www.openai.com" target="_blank" class="internal">OpenAI Link</a>
    <a href="https://www.github.com" class="external">GitHub Link</a>
    <a href="https://www.example.com" target="_blank">Example Link 2</a>
</body>
</html>
a[href^="https"][target="_blank"][class="external"] {
    color: green;
    font-weight: bold;
    text-decoration: underline;
}

속성 선택자와 가상 클래스의 조합

📌 속성 선택자와 가상 클래스의 조합을 사용하면 보다 정밀한 스타일링이 가능하다.

코드설명:
a[href^="https"]:hover 선택자는 href 속성이 https로 시작하는 모든 <a> 요소에 마우스를 올렸을 때(:hover) 적용됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attribute Selector with Pseudo-class Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Attribute Selector with Pseudo-class Example</h1>
    <a href="https://www.example.com">Example Link 1</a>
    <a href="http://www.example.com">Example Link 2</a>
    <a href="https://www.google.com">Google Link</a>
    <a href="https://www.openai.com">OpenAI Link</a>
</body>
</html>
a {
    color: dodgerblue;
    text-decoration: none;
    padding: 5px;
}

/* href 속성이 https로 시작하는 링크에 마우스를 올렸을 때 스타일 적용 */
a[href^="https"]:hover {
    color: white;
    background-color: green;
    text-decoration: underline;
}

 

 

출처: HTML&CSS 마스터북

'CSS' 카테고리의 다른 글

CSS 여백, 요소, 배경  (0) 2024.06.06
CSS 애니메이션_1  (0) 2024.06.03
Css - 가상 클래스(Pseudo Class) 핵심  (0) 2024.05.28
Css 선택자 부분 선택자(Partial Selector) + 가상 클래스(Pseudo Class)  (0) 2024.05.28
Css선택자 - 가상 요소(Pseudo Element)로 사용하기  (0) 2024.05.28

'CSS'의 다른글

  • 현재글Css선택자_속성 선택자 기초

관련글

티스토리툴바