CSS 선택자(그룹, 자손, 자식, 일반 형제, 인접 형제, 속성, 가상)

[ 목차 ]

728x90

✔ 그룹 선택자

1. 그룹 선택자
여러개의 요소를 나열하고 (,)로 구분하여 스타일을 적용

    h2, p {text-align: center;}


                                <html>
                    <head>                    <body>
                 제목<title>           <h2>                <p>
                                     HTML 구조     안녕하세요   <span> 
                                                      <b>를 알아볼게요
                                                        HTML구조

✔ 그룹 선택자 코드

<!DOCTYPE html>

<head>

<title>그룹선택자</title>

<style>

h2,p,h3,ul {text-align: center;}

h2 {color: deepskyblue;font-size: 50px;}

li {display: inline-block; margin-right: 30px; font-weight: bold; color: deeppink;}

</style>

</head>

<body>

<h2>그룹선택자</h2>

<ul>

</ul>

</body>

</html>

✔ 그룹 선택자 결과

✔ 자손 선택자

2. 자손 선택자
조상요소 하위의 모든 요소의 스타일을 적용, 자손은 자식을 포함

    body p{color: deeppink}

3. 자식 선택자
부모의 요소 하위의 자식요소의 스타일을 적용

    body > p{color: deeppink}

✔ 자손 선택자 코드

<!DOCTYPE html>

<head>

<title>자손선택자</title>

<style>

ul a {color: deeppink;text-decoration: none;}

ul > a {font-size: 25px;}

</style>

</head>

<body>

<ul>

</ul>

</body>

</html>

✔ 자손 선택자 결과

✔ 일반 형제 선택자

4. 일반 형제 선택자
형제 관계를 갖는 요소 중에서 요소 다음에 나오는 모든 동생 요소의 스타일을 적용

    h2 ~ p {color: deepskyblue;}

✔ 일반 형제 선택자 코드

<!DOCTYPE html>

<head>

<title>형제선택자</title>

<style>

h3 ~ p {color: white; background-color: deeppink;font-size: 20px;}

p +span {color: gold;background-color: deepskyblue;font-size: 20px;}

</style>

</head>

<body>

<h2>일반형제선택자</h2>

<div>

</div>

</body>

</html>

✔ 일반 형제 선택자 결과

✔ 인접 형제 선택자

5. 인접 형제 선택자
동일한 부모의 요소를 갖는 자식 요소들의 관계, 연속된 동생 요소의 스타일을 적용

    h2 + p {color: deepskyblue;}

✔ 속성 선택자

6. 속성 선택자
HTML 요소에서 src, gref, style, id, class..등 속성을 선택자로 지정해서 스타일을 적용

    <img src = "apple.png" alt="사과이미지">

    [src] {border: 3px solid red;}
    [src="apple.png"] {border: 3px solid red;}

✔ 속성 선택자 코드

<!DOCTYPE html>

<head>

<style>

[href] {text-decoration:none; color: deeppink;}

.attr { background-color: gold;}

[class='attr'] { font-size: 30px;}

[title] {text-align: center;font-size: 50px;}

</style>

</head>

<body>

</body>

</html>

✔ 속성 선택자 결과

✔ 가상 선택자

7. 가상 선택자
클래스를 추가할 필요없이 요소 중에서 순서에 따라 원하는 요소를 선택

    <ul>
        <li>김사과</li>
        <li>반하나</li>
        <li id ="orange" class ="orange">오렌지</li>
        <li>이메론</li>


    #orange {color: deepskyblue; }
    .orange {color: deepskyblue; }


li:first-child
li 요소 중에서 첫번째 해당하는 요소의 스타일을 적용

li:last-child
li 요소 중에서 마지막에 해당하는 요소의 스타일을 적용

li:nth-child(n)
li 요소 중에서 n번째 요소의 스타일을 적용(예 : li:ntn-child(2n+1) : )
- n 은 0부터 시작한다

li:nth-child(odd)
li 요소 중에서 홀수번째 요소의 스타일을 적용

li:nth-child(even)
li 요소 중에서 짝수번째 요소의 스타일을 적용

:link
하이퍼링크가 연결됐을 때 선택자

visited
특정 하이퍼링크를 방문한적이 있을 때 선택

:hover
특정 요소에 마우스를 올렸을 때 선택

:active
특정 요소에 마우스 버튼을 클릭하고 있을 때 선택

::before
특정 요소 앞에 텍스트, 이미지등을 삽입

::after
특정 요소 뒤에 텍스트, 이미지등을 삽입

✔ 가상 선택자 코드

<!DOCTYPE html>

<head>

<style>

.list > li:first-child {color: deeppink;}

.list > li:nth-child(2) {color: gold;}

.list >li:nth-child(odd) { background-color: greenyellow;}

.list > li:last-child{color: deepskyblue;}

a:link { text-decoration: none;}

a:visited {text-decoration: none; color: deepskyblue;}

/*하이퍼링크를 방문하면 변경되는 기능이다.*/

a:hover{text-decoration: underline;color: deeppink;}

/*마우스를 올리면 변경.*/

a:active {text-decoration: underline;color: gold;}

a::before {content: '🍓';}/*효과 전 후 처리하기 위한 목적으로 사용*/

a::after{content: '🍓';} /*내용 앞뒤에 백그라운데 효과를 넣어주는 효과*/

</style>

/*.(class) >(자식)*/

</head>

<body>

</ul>

</body>

</html>

✔ 가상 선택자 결과

저작자표시 비영리 변경금지

'Frontend > CSS' 카테고리의 다른 글

CSS 위치지정(상대, 절대, 고정, float, clear, z-index) (0)	2022.10.31
CSS 배경 종류 (0)	2022.10.31
CSS 텍스트 종류 (0)	2022.10.27
CSS (상속, 전체/ id /class 선택자) (0)	2022.10.26
CSS (기본, 인라인/내부/외부 스타일) (0)	2022.10.26

저장소

CSS 선택자(그룹, 자손, 자식, 일반 형제, 인접 형제, 속성, 가상)

'Frontend > CSS' 카테고리의 다른 글

티스토리툴바

CSS 선택자(그룹, 자손, 자식, 일반 형제, 인접 형제, 속성, 가상)

'Frontend > CSS' 카테고리의 다른 글

관련글

티스토리툴바