영어공부

CSS Attribute Selectors

2020. 1. 21. 13:47
목차
  1. Style HTML Elements With Specific Attributes
  2. CSS [attribute] Selector
  3. CSS [attribute="value"] Selector
  4. CSS [attribute~="value"] Selector
  5. CSS [attribute|="value"] Selector
  6. CSS [attribute^="value"] Selector
  7. CSS [attribute$="value"] Selector
  8. CSS [attribute*="value"] Selector

Style HTML Elements With Specific Attributes

It is possible to style HTML elements that have specific attributes or attribute values.

 

속석을 명시한 html 요소 스타일하기

 

속성 또는 속성 값을 명시되어저 있는 html 요소를 스타일링 하는 것은 가능하다.

 

CSS [attribute] Selector

The [attribute] selector is used to select elements with a specified attribute.

The following example selects all <a> elements with a target attribute:

 

[attribute] 선택자는 명시된 속성을 가지고 있는 요소를 선택하기 위해서 사용되어진다.

다음의 예제는 target 속성을 가지고 있는 모든 <a> 요소를 선택한다.

 

CSS [attribute="value"] Selector

The [attribute="value"] selector is used to select elements with a specified attribute and value.

The following example selects all <a> elements with a target="_blank" attribute:

 

[attribute="value"] 선택자는 명시된 속성과 값을 가진 요소를 선택하기 위해서 사용되어진다.

다음의 예제는 target"="_blank"인 속성의 모든 <a> 요소를 선택한다.

 

 

 

CSS [attribute~="value"] Selector

The [attribute~="value"] selector is used to select elements with an attribute value containing a specified word.

The following example selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower":

 

 

[attribute~="value"] 선택자는 명시된 단어를 포함하는 속성의 값을 가진 요소를 선택하기 위해서 사용되어진다.

다음의 예제는 공백으로 구분되어있는 단어중에서 flower를 포함하는 title 속성을 가진 모든 요소를 선택한다.

 

The example above will match elements with title="flower", title="summer flower", and title="flower new", but not title="my-flower" or title="flowers".

 

위의 예제는 타이틀 속성이 flower, summer flower, flower new 인 것은 모두 매칭되지만, my-flower, flowers는 매칭되지 않는다.

 

 

CSS [attribute|="value"] Selector

The [attribute|="value"] selector is used to select elements with the specified attribute starting with the specified value.

The following example selects all elements with a class attribute value that begins with "top":

Note: The value has to be a whole word, either alone, like class="top", or followed by a hyphen( - ), like class="top-text"! 

 

[attribute|="value"] 선택자는 명시된 value로 시작하는 명시된 속성을 가진 요소를 선택한다.

다음의 예제는 class 속성값이 top으로 시작하는 모든 요소를 선택한다.

주의 : 값은 전체 하나의 완전한 단어여야만 한다. class="top" 처럼, - 이 포함 되지 않는 ?

 

 

CSS [attribute^="value"] Selector

The [attribute^="value"] selector is used to select elements whose attribute value begins with a specified value.

The following example selects all elements with a class attribute value that begins with "top":

Note: The value does not have to be a whole word! 

 

[attribute^="value"] 선택자는 구체적인 값으로 시작되는 속성들을 선택하기 위해 사용되어진다.

다음의 예제는 top로 시작하는 속성의 값을 가진 하나의 클래스를 가진 모든 요소를 선택한다.

주의 : 값은 하나의 전체 단어일 필요는 없다.?

 

 

CSS [attribute$="value"] Selector

The [attribute$="value"] selector is used to select elements whose attribute value ends with a specified value.

The following example selects all elements with a class attribute value that ends with "test":

Note: The value does not have to be a whole word!  

 

 

[attribute$="value"] 선택자는 구체적인 값으로 끝나는 속성을 가진 요소를 선택하기 위해서 사용되어진다.

다음의 예제는 "test"로 끝나는 값을 가진 클래스의 모든 요소를 선택한다.

주의 값은 하나의 완전한 단어일 필요는 없다.

 

 

CSS [attribute*="value"] Selector

The [attribute*="value"] selector is used to select elements whose attribute value contains a specified value.

The following example selects all elements with a class attribute value that contains "te":

Note: The value does not have to be a whole word!  

 

[attribute*="value"] 선택자는 구체적인 값을 포함하는 속성값의 요소를 선택하기 위해서 사용되어진다.

다음의 예제는 "te"를 포함하는 속성값을 가진 클래스의 모든 요소들을 선택한다.

주의 : 값은 하나의 완전한 단어일 필요는 없다.

 

 

'영어공부' 카테고리의 다른 글

CSS Specificity  (0) 2020.01.21
CSS Counters  (0) 2020.01.21
CSS Image Sprites  (0) 2020.01.21
CSS Dropdowns  (0) 2020.01.21
CSS Navigation Bar  (0) 2020.01.20
  1. Style HTML Elements With Specific Attributes
  2. CSS [attribute] Selector
  3. CSS [attribute="value"] Selector
  4. CSS [attribute~="value"] Selector
  5. CSS [attribute|="value"] Selector
  6. CSS [attribute^="value"] Selector
  7. CSS [attribute$="value"] Selector
  8. CSS [attribute*="value"] Selector
'영어공부' 카테고리의 다른 글
  • CSS Specificity
  • CSS Counters
  • CSS Image Sprites
  • CSS Dropdowns
jeongsu
jeongsu
박정수가 공부한 자료를 남기기 위한 블로그
jeongsu
Park_jeong_su
jeongsu
전체
오늘
어제
  • 분류 전체보기 (255)
    • 제조산업 (11)
      • MES (8)
      • 반송 (0)
      • ERP (1)
    • dev (93)
      • 스프링 (2)
      • 데이터베이스 (20)
      • 프로그래밍 (6)
      • 알고리즘 (3)
      • Network (2)
      • trouble shooting (5)
      • 개인 프로젝트 (9)
      • 기타 (46)
    • 박정수 (85)
      • 자기소개 (1)
      • diary & 일상생활 (77)
      • 해외생활 - 중국편 (2)
      • 회고 (4)
    • 영어공부 (51)
    • 유용한 사이트 모음집 (13)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 협업프로그램
  • MES 개발자를 하면 안되는 이유
  • MES 개발
  • 스마트팩토리 전망
  • java
  • vscode
  • w3cSchool
  • tutorial
  • 어차피 뒤짐
  • recipe management system
  • oracle
  • MES 도망쳐
  • Gin
  • mermaid js
  • mes
  • spring
  • coffee-bytes
  • ERP
  • JPA
  • RMS란
  • 비트코인
  • MES의 어려움
  • 배움의 목적
  • 본질이 존재할까?
  • MES 란
  • MES 전망
  • 회고
  • 에임시스템
  • MES란
  • MES 개발자

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.1.4
jeongsu
CSS Attribute Selectors
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.