css 선택자
나를 찾고, 내 옆에 있는 애를 찾고, 내 형제를 찾고, 여러가지를 찾는 선택자!!
진짜 세상 헷갈리는 css를 정리해보자!!
우선 참고하기 좋을 자료부터!
선택자 연습: https://flukeout.github.io/
강의 : https://youtu.be/fXIoeZ-h43c
1) 기본적인 선택자
전체 선택자 : * {}
태그 선택자 : 태그명 {}
클래스 선택자: .클래스명{}
아이디 선택자: #아이디명{}
<style>
.one {
color: aqua;
}
</style>
</head>
<body>
<h1>hello world</h1>
<h1>hello world</h1>
<h1 class="one">hello world</h1>
<h1>hello world</h1>
<h1>hello world</h1>
</body>
📍주의사항
- 클래스는 중첩해서 사용할 수 있다. (id는 불가)
- page내 class는 여러 개 존재해도 된다. (id는 하나만)＊
- id가 여러 개가 들어가면 오류가 발생하지 않지만, 맨 위에 있는 걸로만 작동한다.
- a href=”#” 에 있는 #은 아이디를 의미
- 보통 문서 스타일을 나눌때는 class, 섹터를 나눌때는 id를 사용 한다.
2.복합 선택자
2-1) 하위 선택자
📌 어떤 선택자 밑에 있는 선택자를 선택할 때 사용
선택자(공백)선택자 {}
section ul { text-shadow: none; }
2-2) 자식 선택자
📌 자기 바로 아래 있는 하위(자식) 선택자를 선택
선택자>하위선택자 {}
li > p { color: blue; }
2-3) 인접 형제 선택자
📌 가장 가까이 있는 형제 선택자를 선택
선택자 + 선택자 {}
h1 + ul { color: red; }
2-4) 일반 형제 선택자
📌 앞 요소이후에 뒷요소가 가지는 모든 형제 선택자를 선택
선택자 ~ 선택자 {}
h1 ~ ul { color: red; }
📍주의사항
style>
/* 1번 */
.one .two {
color: red;
}
/* 2번 */
.one.two {
color: blue;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="one two"></div>
<div class="one">
<div class="two"></div>
</div>
1번은 one이라는 클래스의 하위의 있는 two를 선택한것!!
2번은 one과 two클래스를 모두 선택한것!!
3. 속성선택자
3-1) 태그[속성이름]
📍해당 이름의 속성을 가진 태그를 선택
태그 [속성이름]
a[href] { font-size: 32px; }
3-2) 태그[속성이름="변수"]
📍태그내에 속성과 변수값이 일치하는 태그를 선택
태그[속성이름="변수"]
a[href="http://paullab.co.kr"] { font-size: 48px; }
3-3) 태그[속성이름~="변수"]
📍태그내에 속성이 변수값을 포함하는 태그 선택
태그[속성이름~="변수"]
a[href~="paullab"] { color: black; }
3-4) 태그[속성이름*="변수"]
📍태그내에 속성이 변수값을 포함하는 태그 선택
태그 [속성이름*="변수"]
a[href*="paul"] { color: black; }
여기서!!!!!!
그럼3-3이랑 3-4랑 같은 내용이 아닌가????
👩🎓
1. 태그[속성이름=값] : 태그 이면서 해당 속성의 값이 같은 것
1은 공백을 포함하지 않기 때문에 정확하게 일치해야 한다.
2.태그[속성이름~="값"]
2는 공백을 포함하기 때문에 two 클래스를 가진 요소는 해당 태그는 모두 선택됩니다. 예를 들어 one two, one two three는 선택되지만 onetwo, one-two와 같은 것은 선택되지 않습니다.
3.태그[속성이름*="값"]
3은 one이라고 문자열중간에 있어도 다 포함합니다.
twoonethee이런 식으로요
a[href="http://paullab.co.kr"] {
font-size: 48px;
}
a[href~="paullab"] {
font-weight: normal;
}
a[href*="paullab"] {
font-weight: bold;
}
</style>
</head>
<body>
<a href="#">클릭해!</a>
<a href="http://paullab.co.kr">클릭해!</a>
<a>클릭해!</a>
</body>
</html> 요 경우라면 첫번째 클릭해!는 아무도 선택하지 않은 것이고,
두번째 클릭해는 첫번째와 세번째에서 선택해서 48p과 bold가 적용됐겠죠?
💡결과
3-5) 태그[속성이름^="변수"]
📍태그내에 속성의 속성값이 변수로 시작하는 태그 선택
태그[속성이름^="변수"]
a[href^="http"] { color: black; }
3-6) 태그[속성이름$="변수"]
📍태그내에 속성의 속성값이 변수로 끝나는 태그 선택
태그[속성이름$="변수"]
a[href$="kr"]{ color: black; }
3-7)태그[속성이름|="변수"]
📍태그내에 속성값이 변수와 같거나, 변수로 시작하는 태그 선택
태그[속성이름|="변수"]
a[href|="http"]{ color: black; }
4.가상 클래스 선택자
특정한 조건에 의해서 선택이 된다.
실제로 존재하지 않는 클래싀만 클래스를 놓은것처럼 작동
:link - 방문한 적이 없는 링크
:visited - 방문한 적이 있는 링크
:hover - 마우스를 롤오버 했을 때
:active - 마우스를 클릭했을 때
:focus - 포커스 되었을 때 (input 태그 등)
:first - 첫번째 요소
:last - 마지막 요소
:first-child - 첫번째 자식
:last-child - 마지막 자식
:nth-child(n) - n번째 자식
:enabled – 모든 활성 된 것
📌가장 많이 사용되는 것들은
:hover - 마우스를 롤오버 했을 때
:active - 마우스를 클릭했을 때
:focus - 포커스 되었을 때 (input 태그 등)
:first-child - 첫번째 자식
:last-child - 마지막 자식
:nth-child(n) - n 번째 자식
우선은 요정도만 기억하고 하면서 점점 익혀 갑시다!!
최근에 생긴 부정 가상 선택자
태그 not (클래스){조건} : 조건이 아닌 것들을 선택한다.
li:not(.클래스명){ color: red;}5.가상 요소 선택자
가상 요소 선택자는 마크업 없는 요소를 삽입하는 용도로 사용
::before 바로 앞에 다른 요소를 삽입합니다.
::after 바로 뒤에 다른 요소를 삽입합니다.
::first-letter 각 요소의 첫 글자를 선택합니다.
::first-line 각 요소의 첫 번째 줄을 선택합니다.
::marker marker 목록 항목의 마커를 선택합니다.
::selection 해당 요소에서 사용자가 선택한 요소 부분을 선택합니다.
::placeholder Input 필드 안 힌트 텍스트에 스타일을 적용합니다.
📌 가장 많이 사용되는 가상 요소 선택자
:before 바로 앞에 다른 요소를 삽입합니다.
::after 바로 뒤에 다른 요소를 삽입합니다.
📍중요한 내용보다는 앞뒤로 꾸미는 용도로 많이 사용한다.
선택자는 꾸준히 살펴보고, 새로운 예시들을 계속 업로드하며 공부해야겠다🤣
