category
simple selectors
combinator selectors
pseudo-class selectord
pseudo-elements selectors
attribute selectors
attribute selectors?
attribute를 가지고있는? 혹은 attribute value가 적용된 element를 선택하기 위하여 사용된다.
attribute? value?
tag에서 props로 내려주는 애(머라고 표현해야할지 잘 모르겠네요) 예시를 보면 압니다.!
<input id="password" name="aa" placeholder="test"/>해당 element에 id, name, placeholder는 attibute이고, 각 attribute의 value는 password, aa, test입니다.
syntax
[attribute]
selector[attribute]{
property:value
}해당 attrubute의 value에 상관없이 유무만을 확인하였을 때, attribute가 있는 element를 select하고 스타일을 적용시킵니다.
예시
a[target] {
background-color: yellow;
}
<a href="https://www.w3schools.com">w3schools.com</a>(1)
<a href="http://www.disney.com" target="_blank">disney.com</a>(2)
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>(3)위의 예시에서 (2),(3) element에 style이 적용됩니다.
[attribute="value"]
selector[attribute="value"]{
property:value
}attibute가 특정 value인 element를 select합니다.
예시
a[target="_blank"] {
background-color: yellow;
}
<a href="https://www.w3schools.com">w3schools.com</a>(1)
<a href="http://www.disney.com" target="_blank">disney.com</a>(2)
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>(3)위의 예시에서 (2)element가 선택되고 style이 적용됩니다.
개인적으로 input을 꾸밀 때 type에 따라 다른 style을 적용할 때, 사용한 경험이 있습니다.
[attribute~="value"]
selector[attribute~="value"]{
property:value
}value가 특정 단어를 "포함"하고 있는지를 검사하고 select합니다.
포함=>a space-separated list of words
예시를 통해 보면 이해가 됩니다.
예시
[title~="flower"] {
border: 5px solid yellow;
}
<img src="klematis.jpg" title="klematis flower" height="113">(1)
<img src="img_flwr.gif" title="flower" >(2)
<img src="img_tree.gif" title="tree" >(3)
<img src="img_tree.gif" title="flowers" >(4)위의 예시에서 (1),(2)이 select되고 style이 적용됩니다. 띄워쓰기를 기준으로 정확하게 해당 단어를 가지고 있다.로 이해하면 될 것 같습니다. (4)가 안되는걸 생각했을 때
[attibute|="value"]
selector[attribute|="value"]{
property:value
}The [attribute|="value"] selector is used to select elements with the specified attribute, whose value can be exactly the specified value, or the specified value followed by a hyphen (-).
정확하게 해당 value를 가지거나, hypen으로 구분되어 해당 value를 가지는 element를 select하고 style합니다.
예시
[class|="top"] {
background: yellow;
}
<h1 class="top-header">Welcome</h1>(1)
<p class="top-text">Hello world!</p>(2)
<p class="topcontent">Are you learning CSS?</p>(3)
<p class="top">Are you learning CSS?</p>(4)
<p class="top content">Are you learning CSS?</p>(5)
<p class="top-content-ㅁㅁ">Are you learning CSS?</p>(6) (1),(2),(4),(6)번 element에 style이 적용된다.
(5)이 select되지 않는다점이 인상적이다.
etc
[attribute^="value"]
select elements with the specified attribute, whose value starts with the specified value.
[attribute$="value"]
select elements whose attribute value ends with a specified value.
[attribute*="value"]
select elements whose attribute value contains a specified value.
what i learend
기나긴 selector의 여정이 끝났다.(사실은 이제 막 시작이다. 적용을 안했잖아~~) 다른 사람의 코드를 보며 이게 무엇이지? 하는 알 수 없는 css code들이 있었는데, 이제 근거 없는 자신감이 생긴다. 또한 협업 시 정확한 용어로 소통할 수 있다는 생각이든다. chat gpt에 물어볼 때 그것이 협업인지는 모르겠지만, 정확한 용어를 사용하여 더 정확한 solution을 받는다. 또한 코드 가독성을 높이기 위한 option을 얻은 느낌이다. 어떻게 하면 코드 숫자를 줄일지, 어떻게 하면 코드 가독성을 높일지를 고민하는 단계에서 다양한 selector 방법에 대해 고민해 보아야겠다.
