Jam's story

[CSS]속성선택자 본문

WEB/CSS

[CSS]속성선택자

애플쩀 2022. 5. 25. 14:15

요소 + 특정속성 또는 속성값을 가지는 요소의 스타일 지정

속성선택자(selector) {

}

[속성명[?]=[속성값]]

  • = 속성을 가지고만 있으면 적용
  • ^= 시작하면 적용
  • $= 끝나면 적용
  • *= 포함하면 적용 (더 포괄적인 개념)
  • ~= 특정 단어 포함하면 적용
  • |= 잘 안쓰인다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcon icon"type="image/x-icon"href="../images/SiSt.ico">
<style type="text/css">
/* type 속성이 있으면 어떤 스타일 지정 
[type] {
width:200px;
border:1px solid red;
} */

/*  type 속성을 가지고 있으면서 text인것만 어떤 스타일 지정  

[type='text'] {
width:200px;
border:1px solid red;
}*/
a[title='flower']{}

/* 오라클의 like와 같이 어디든 flower글자가 있는것  */
a[title*='flower']{}

/* where title like 'flower%'
flower로 시작하는 */
 a[title^='flower']{}
 
 /* where title like '%flower'
flower로 끝나는 */
a[title$='flower']{}
/*~= 단어 flower가 포함된 title 속성요소를 가질때 ,
하나의 단어로 인식(끊어진단어 )
특정부분이 아니다. 
*/
a[title~='flower']{
text-decoration: none;
color:red;
}

</style>
</head>
<body>
<a href="#"title="klematis flower">naver</a>
<a href="#"title="flower">daum</a>
<a href="#"title="kbsflower">sist</a>
<a href="#"title="kbs-flower">sist</a>
<a href="#"title="flower">sist</a>

<hr>
<h3>ex06.html css selector 선택자 </h3>
<input><br>
<input><br>
<input type="text"><br>
<input type="submit"><br>
<input type="reset"><br>
</body>
</html>

저작자표시 (새창열림)

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

[CSS] 특수성(특이성)  (0) 2022.05.25
[CSS] 검색창 만들기( 이미지 넣기, 크기늘리기)  (0) 2022.05.25
[CSS] 이미지 스프라이트 - 아이콘  (0) 2022.05.25
[CSS] 반응형 웹+ 이미지 갤러리  (0) 2022.05.25
[CSS] 타임라인  (0) 2022.05.25
'WEB/CSS' Related Articles more
Comments