[CSS]선택자_조합 선택자

티스토리 뷰

수업/└HTML&CSS

[CSS]선택자_조합 선택자

onlyun 2022. 1. 2. 18:48

★★★

기존의 여러 선택자를 복합적으로 조합하여 선택

1. 조합 선택자 이해

<div>
   <h3>조합 선택자 이해</h3>
   <ul>
       <li> ul의 자식이자 div의 자손 1 </li>
       <li> ul의 자식이자 div의 자손 2 </li>
       <li> ul의 자식이자 div의 자손 3 </li>
   </ul>
</div>

-<div>의 자식 : <h3>, <ul>

-<ul>의 자식 : <li>

-<h3>, <ul>는 같은 레벨에 있는 형제

2. 조합 선택자 종류

자손 선택자	선택자A 선택자B	선택자B가 선택자A에 반드시 포함되어 있을 경우에 선택
자식 선택자	선택자A > 선택자B	부모 선택자A의 자식인 선택자B를 선택(직계 자식)
인접 형제 선택자	선택자A + 선택자B	선택자A 바로 다음에 위치한 선택자B를 선택
일반 형제 선택자	선택자A ~ 선택자B	선택자A 뒤에 인접하여 나타나는 모든 선택자B를 선택
그룹 선택자	선택자A, 선택자B	선택자A와 선택자B를 모두 선택

-자손 선택자

선택자B가 선택자A에 반드시 포함되어 있을 경우에 선택

<head>
    <style>
        div ul{color:red;}
        div h3{color:white; background-color:black;}
    </stlye>
</head>
<body>
    <div>
        <h3>자식과 자손</h3> <!--배경색 black, 글자색 white-->
        <ul>자식 <!--글자색 red-->
            <li>자손1(자식의 자식)</li>
            <li>자손2(자식의 자식)</li>
        </ul>
    </div>
    <h3>자식과 자손_2</h3> <!--스타일 적용 x-->
</body>

-자식 선택자

직계 자식. 자손 선택할 경우 단계 밟아 들어가야 함.

부모 선택자A의 자식인 선택자B를 선택(직계 자식)

<head>
    <style>
        body > div > h3 { color: red; }/*단계를 밟아 내려가는 건 됨.*/
        body > p { color: green; background-color: yellow; }
        body > h3 > tel > home { color: blue; }
        body > std{background-color: black; color:white;}/*건너뛰고 자손 선택은 안 됨.*/
    </style>
</head>
<body>
    <div>
        <h3>Child Selector_1</h3>
    </div>
    <p>자식 선택자</p>
    <h3> 
        <sno>123456</sno><br>
        <std>홍민성</std><br>
        <tel> 
            <office>02-4567-1010</office><br>
            <home>010-1234-5678</home>			 
        </tel>
    </h3>
</body>

-인접 형제 선택자

선택자A 바로 다음에 위치한 선택자B를 선택 (h2 +h1 순서는 안 됨. 역순)

<head>
    <style>
        h1 + h2 + ul { color: blue; }/*h1 인접한 h2, h2에 인접한 ul. 선택된 것은 ul*/
        div + h3 { color: red; }
        h3 + p { color: purple; background-color: yellow; }
        h1 + ul{background-color: black; color:skyblue;} /*인접하지 않으면 선택 안 됨*/
    </style>
</head>
<body>
    <div>
        <h1>인접 형제 선택자1</h1>
        <h2>인접 형제 선택자2</h2>
        <ul>목록
            <li>주제1</li>
            <li>주제2</li>
        </ul>   
    </div>
    <h3>Adjacent Selector_1</h3>
    <p>인접 형제 선택자에 의한 스타일 적용</p>
    <h3>Adjacent Selector_2</h3>
</body>

-일반 형제 선택자

선택자A 뒤에 인접하여 나타나는 모든 선택자B를 선택

<head>
    <style>  /* ~은 필드 문자란 뜻 */
        h1 ~ ul{color:blue;}
        div ~ h3{color:red;}
        h3 ~ p{color:white; background-color:purple;}
    </style>
</head>
<body>
    <div>
        <h1>형제 선택자1</h1>
        <h2>형제 선택자2</h2>
        <ul>목록1  /*글자색 blue*/
            <li>주제1</li>
            </li>주제2</li>
        </ul>
        <p>형제 선택3</p>
        <ul>목록2  /*글자색 blue*/
            <li>주제21</li>
            <li>주제22</li>
        </ul>
    </div>
    <h3>sibling selector_1</h3>  /*글자색 red*/
    <h4>같은 레벨 형제</h4>
    <p>일반 형제 선택자에 의한 스타일 적용</p> /*글자색 white, 배경색 purple*/
    <h3>sibling selector_2</h3>  /*글자색 red*/
    <h3>sibling selector_3</h3>  /*글자색 red*/
</body>

-그룹 선택자

인접 등의 조건에 상관없이 나열하여 선택.

<head>
    <style>
       h3, p, h2{color:white; background-color:teal;
           font-family: sans-serif; /**sans-serif : 컴퓨터에 있는 삐침없는 고딕체**/
       }
    </style>  /* h3, p, h2 모두 스타일 적용 */
</head>
<body>
    <h2>Group Seclector_1</h2>
    <p>스타일 지정을 그룹으로 적용</p>
    <div>
        <h3>Group Seclector_1</h3>
    </div>
</body>

**sans-serif

디자인적 요소로 폰트 설정할 때,

지원하지 않는 폰트일 경우 디폴트 폰트로 들어가는데 그게 디자인적으로 어울리지 않을때를 대비해

각 컴퓨터의 삐침없는 폰트로 sans-serif를 설정한다.

저작자표시 (새창열림)

'수업 > └HTML&CSS' 카테고리의 다른 글

[CSS]박스_레이아웃 속성 : position (0)	2022.01.03
[CSS]박스(Box Model) (0)	2022.01.03
[CSS]선택자_기본 선택자, 가상 선택자 (0)	2022.01.02
[CSS]기본 이론 (0)	2022.01.02
[HTML]공간 분할 태그 <iframe> (0)	2022.01.02

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/07 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

글 보관함

LOG.info("yun's dev");

티스토리 뷰