css 선택자

html파일에 css파일 삽입하기

 

<link rel="stylesheet" href="{css파일 경로}"/>

 

head 부분에 위 코드를 입력한다.

href 속성값에 css파일의 경로를 입력한다.

---

특정 태그에 style 설정하기

 

p {
    background-color : blue;
}

li {
    color : green;
}

모든 p 태그의 배경색을 blue로 설정한다.

모든 li 태그의 글자색을 green으로 설정한다.

---

특정 class에 style 설정하기

 

.firstlist {
    background-color : deepskyblue;
}

모든 firstlist 클래스의 배경색을 deepskyblue로 설정한다.

---

특정 id에 style 설정하기

 

#loginbutton {
    background-color : pink;
}

loginbutton id의 배경색을 pink로 설정한다.

---

특정 태그의 특정 이름에 style 설정하기

 

p[name=n1] {
    background-color : aqua;
}

p 태그 중 name="n1" 속성을 가진 부분만 배경색을 aqua로 설정한다.

---

속성값에 "-"를 포함한 태그에 style 설정하기

 

p[style|=myname] {
    background-color: gray;
}

---

속성값이 특정값으로 시작되는 태그에 style 설정하기

 

div[class^=btn] {
    background-color: yellow;
}

class값이 btn으로 시작하는 div만 배경색을 yellow로 설정한다.

---

속성값에 특정 값이 포함된 태그에 style 설정하기

 

div[class*=navbar] {
    background-color: forestgreen;
}

class값에 navbar가 포함되어 있는 div만 배경색을 forestgreen으로 설정한다.

---

태그의 자손 선택해서 style 설정하기

 

div ul li {
    background-color: aquamarine;
}

div 태그 내부의 ul 태그 내부의 li만 배경색을 aquamarine으로 설정한다.

---

특정 태그 바로 다음의 태그 하나만 선택해서 style 설정하기

 

h5 + p {
    background-color: red;
}

h5 태그 바로 다음의 p 태그 하나만 배경색을 red로 설정한다.

---

특정 태그 바로 다음 한 종류의 태그 모두에 style 설정하기

 

h5 ~ p {
    background-color: hotpink;
}

h5 태그 뒤의 모든 p 태그에 배경색을 hotpink로 설정한다.

---

특정 번째의 자손에 style 설정하기

 

#main-div>p:first-child {
    color: black;
}

#main-div>p:nth-child(2) {
    color: blue;
}

#main-div>p:nth-last-child(3) {
    color: red;
}

#main-div>p:last-child {
    color: green;
}

id가 main-div인 태그 내부의 첫 번째 p의 글자색을 black으로 설정한다.

 

id가 main-div인 태그 내부의 두 번째 p의 글자색을 blue로 설정한다.

 

id가 main-div인 태그 내부의 끝에서 세 번째 p의 글자색을 red로 설정한다.

 

id가 main-div인 태그 내부의 마지막 p의 글자색을 green으로 설정한다.

---

특정 번째의 특정 태그 자손에 style 설정하기

 

#div-second>p:nth-of-type(1) {
    border: 1px solid;
}

id가 div-second인 태그 내부의 p들 중 첫 번째의 p에 테두리를 설정한다.