CSS선택자


말그대로 스타일을 입히기위해 선택을 하는 것입니다.

html태그나 속성으로 선택을 할 수 있습니다. 


연결 선택자 종류


종류 

설명 

 a > b

a에 포함되어 있는 요소중 b에 스타일을 적용합니다.

 a + b

a와 같은 위치에 있는 요소중 첫번째로 나온 b에 스타일을 적용합니다.

 a~b

a와 같은 위치에 있는 요소중 a다음으로 나온 모든 b에 스타일을 적용합니다.


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
32
33
34
35
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<style>
    #a>h1 {
        color: red;
    }
    #b+h1 {
        color: blue;
    }
    h1~h2 {
        color: orange;
    }
</style>
<body>
    <div id="a">
        <h1>aaa</h1>
        <h3>bbb</h3>
    </div>
    <div id="b">
    </div>
    <h1>aaa</h1>
    <h1>bbb</h1>
    <div>
        <div>
            <h1>aaa</h1>
            <h2>bbb</h2>
            <h2>ccc</h2>
        </div>
    </div>
</body>
</html>
cs



속성 선택자 종류


종류 

설명 

a[속성] 

a태그중 오른쪽 속성값을 가진요소에 스타일을 적용합니다.

a[속성=속성값]

a태그중 오른쪽 속성의 속성값을 가진요소에 스타일을 적용합니다.

a[속성~=속성값]

a태그중 오른쪽 속성의 속성값중 선택자에 있는 속성값이 들어있으면 스타일을 적용합니다.

a[속성|=속성값]

a태그중 선택자에서의 속성값이 들어있거나 속성값- 의값이 들어있으면 스타일을 적용합니다.

a[속성^=속성값]

a태그중 선택자에서의 속성값이 처음에 있으면 스타일을 적용합니다.

ex) color(O) background-color(X)

a[속성$=속성값]

a태그중 선택자에서의 속성값이 마지막에 있으면 스타일을 적용합니다.

위의 예와 비슷합니다.

a[속성*=속성값]

a태그중 오른쪽 속성값이 어디에 붙어있거나 있기만하면 스타일을 적용합니다.


소스코드↓

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!doctype>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>html문서</title>
</head>
<style>
  h1[style] {
    color: red;
  }
  input[type=button] {
    background-color: black;
  }
  div[id~="a"]{
    margin:200px;
    width:200px;
    height:200px;
    border:2px solid black;
  }
  div[display|="inline"]{
    margin:300px;
    width:300px;
    height:300px;
    border:2px solid black;
  }
  ol[start^="1"]{
    color:blue;
  }
  ol[start$=i]{
    color:red;
  }
  a[href*=naver]{
    color:green;
  }
</style>
<body>
  <h1 style="background-color:black>>aa</h1>  
  <label id="a">체크박스
    <input type="button" class="a">
  </label>  
  <div id="a"></div>  
  <div display="inline"></div>
  <div display="inline-block"></div>
  <ol start="1">
    <li>파랑</li>
  </ol>
  <ol start="i">
    <li>빨강</li>
  </ol>  
  <a href="https://naver.com">네이버</a>
</body>
</html>
cs


여기까지 포스팅을 마치도록 하겠습니다.

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

'HTML' 카테고리의 다른 글

표 관련 스타일  (0) 2018.01.23
위치관련 속성  (0) 2018.01.16
마진과 패딩  (0) 2018.01.12
박스모델과 테두리 관련 스타일  (0) 2018.01.10
그라데이션 효과 만들기  (0) 2018.01.08

+ Recent posts

티스토리툴바