웹/css

고급 선택자(연결선택자, 속성선택자,가상선택자 )

hihijh826 2023. 8. 2. 23:45
728x90
반응형
SMALL

id 선택

html에서 ..
<div id="a" .....

css에서..
#a{}
  • id는 html에서 유일해야됨

class 선택

html에서...
<div class="a"....

css에서..
.a{}
  • class를 html내에서 다른 요소에 적용 해도 됨

(1)연결 선택자

1-1) 하위 요소에 스타일 적용

  • 하위요소 : 특정 요소 기준 그 안에 포함된 요소  
  • 자식요소 : 현재 요소 기준 바로 한 단계 아래 요소
  • 손자요소 : 자식 요소의 한단계 아래 아래 료소

하위 선택자 (자손 선택자 ) : 부모 요소에 포함된 하위 요소를 모두 선택

상위 요소 하위요소
section p { } //section 요소의 모든 하위 p에 적용 할 스타일

자식 선택자 : 하위 선택자와 다르게 자식 요소에만 스타일 적용

부모요소 > 자식 요소 

section> p { } 

//html
<section>
	<P> text</p> //자식요소 
	<div>
		<p>text11</p> //하위 요소
</section>

1-2) 형제 요소에 스타일 적용

  • 형제 관게 : 부모 요소가 같을 경우
  • 형 요소 : 먼저 나옴
  • 동생 요소 : 나중에 나

인접 형제 선택자 : 형제 요소 중에서 첫 번째 동생 요소만 선택

요소1  + 요소 2

h1 + p { color: blue;} // h1 요소와 형제인 p 요소 중 첫번째 p 요소만 선택하여 글자색 변경

//html
<h1>text</h1>
<p>texttt</p1>  //h1의 형제 요소 중 첫 번째 형제인 p 요소(여기에만 적용)  
<p>1234</p1>

형제 선택자 : 모든 형제 요소에 적용

요소1 ~ 요소2


h1 ~ p { color: blue;} // h1 요소와 형제인 p 요소 전체 색깔 변경 

//html
<h1>text</h1>
<p>texttt</p1>  //h1의 형제 요소 중 첫 번째 형제인 p 요소(여기에 적용)  
<p>1234</p1> (여기에도 적용)

(2) 속성 선택자

2-1) [속성] 선택자

  • 특정 속성이 있는 요소 선택
a[href]{   }

html...
<a href = "www.naver.cpom">네이버</a>

2-2) [속성 = 속성값]

  • 주어진 속성과 속성값이 일치하는 요소 찾음
a[target = _blank]{  } 


html...
<a href = "www.naver.com" targer="_blan"></a>

2-3) [속성 ~=값]

  • 여러 속성값 중에서 해당 속성값이 포함된 요소 선택
[class ~=button]{   } 
// class 속성 값에 button이 포함된 요소 찾기
//연결된게 아니라 그 단어가 존재하는지 아닌지

2-4) [속성 |=값]

  • 특정 속성값이 포함된 속성에 스타일을 적용
  • 지정한 값과 일치하거나 하이픈( - )으로 연결된 단어도 허용

2-5) [속성 ^=값]

  • 속성값이 정확하게 일치하지 않더라도 속성값으로 시작하는 요소 선택
a[tilte ^=eng]{   } 
//eng으로 시작하는 요소뿐만 아니라 english 인 요소도 선택 가능

2-6) [속성 $=값]

  • 지정한 속성값으로 끝나는 요소 선택
[href $= xls] {   } 

//html
<li><a href = "intro.xls"></a></li>
   // 속성       속성값(xls로 끝남)

2-7) [속성 *=값]

  • 속성값이 어느 위치에 있든지 지정한 속성값이 포함된 요소 선택
a[href *= w3]   //속성값 문자열 일부에 w3이 있는 a요소 찾


html..
<a href = "http: ..w3...."></a>

(3) 가상 클래스와 가상 요소

 사용자 동작에 반응하는 가상 클래스

 

(1) :link { color:pink; }

  • 아직 방문하지 않은 요소의 글자색을 정의합니다.
  • ex ) a: link 

(2) : visited { color:black; }

  • 사용자가 방문한 적이 있는 링크의 글자색을 정의합니다.

(3) :hover { color:red; }

  • 마우스를 링크에 올려두었을 때, 스타일 지정
  • 서브메뉴 생성 이용

(4) :active { color:green; }

  • 마우스로 링크를 클릭하고 뗄 때까지의 글자색을 정의합니다.

(5) :focus{ }

  • 웹 요소에 초점이 맞추어졌을 때 스타일 지정

ex) 텍스트 필드 안에 마우스 포인터를 올려놓았을 때의 스타일 지정

 

(5) :nth-child 

  • 형제사이에서 순서에 따라 요소 선택
  • nth-child(even) : 짝스
  • nth-child(odd) : 짝수 

(6) :not(selector) 

  • not(selector) 안에 포함된 요소는 제외 시킴 

예시

const Indicator = styled.div`
  width: 30px; // 막대 길이 조정
  height: 6px; // 막대 높이 조정
  border-radius: 3px;
  background: ${({ active }) => (active ? '#3b82f6' : '#e0e0e0')}; // 현재 페이지에 따라 색상 변경
  margin: 0 5px;
  transition: background 0.3s;

  // 현재 페이지의 모양 변경
  &:first-child {
    border-radius: 3px; // 첫 번째 점
  }

  &:not(:first-child) {
    border-radius: 3px; // 나머지 점
  }

  // 현재 페이지에 따라 모양 변경
  ${({ active }) => active && `
    width: 40px; // 현재 페이지 점의 길이
    background: #3b82f6; // 강조 색상
  `}
`;

.

  1. :first-child 선택자:
    • &:first-child: 인디케이터가 부모 요소 내에서 첫 번째 자식인 경우의 스타일을 정의합니다. 이 경우 특별한 스타일이 없으므로 기본적으로 border-radius만 설정되어 있습니다.
  2. :not(:first-child) 선택자:
    • &:not(:first-child): 첫 번째 자식이 아닌 모든 인디케이터에 적용되는 스타일을 정의합니다. 여기서도 특별한 스타일이 설정되어 있지 않습니다.
  3. 활성화된 인디케이터:
    • ${({ active }) => active && ...}: active prop이 true일 때만 적용되는 추가 스타일을 정의합니다. 이 경우, 인디케이터의 너비를 40픽셀로 늘리고 배경색을 강조 색상으로 변경합니다.

:first-child와 :not(:first-child)

  • :first-child:
    • 부모 요소의 첫 번째 자식 요소를 선택합니다. 주로 첫 번째 인디케이터에 대해 특정 스타일을 적용할 수 있습니다.
  • :not(:first-child):
    • 첫 번째 자식이 아닌 모든 자식 요소를 선택합니다. 이를 통해 나머지 인디케이터에 대한 스타일을 정의할 수 있습니다.

 

 

 

순서 : link → visited →hover→ active

  • 순서대로 정의해야 작용

3-2) 요소 상태에 따른 가상 클래스

(1) :target

  • 앵커 대상에 스타일 적용
  • 앵커 : 같은 문서에서 다른 위치로 이동
  • 링크 : 같은 사이트나 다른 사이트의 페이지 이동
#intro:target{  } 
//html
<li><a href = "#intro"> 이용 안내<a></li> //앵커 클릭시 

<div id = " intro" class="contents">
	<h2>text></h2> // 이부분 스타일 적용

(2) :enabled / disabled

  • enabled : 해당 요소가 사용할 수 있는 상태일 때의 스타일 지정
  • disabled : 해당 요소가 사용 할 수 없는 상태일 때의 스타일 지정

(3) :checked

  • 라디오 박스, 체크 박스에 사용
				#signup input: checked +label{ }  //input 요소에 checked 속성이 추가되었을 때 
label 요소의 스타일

 

 

3-3) 가상요소

:  요소의 특정부분을 선택시

 

- :: placeholder: Input 상자 안에 텍스트 홀더를 삽입 할 수 있다

/* 가상요소 */
    /* before : 콘텐츠 시작 부분에 생성  */
    .required::before {
      content: "*";
      margin-right: 2px;
      color: red;
      font-size: 18px;
    }

    [data-tooltip] {
      position: relative;
    }

    /* after : 콘텐츠 이후에  */
    [data-tooltip]:hover::after {
      content: attr(data-tooltip);
      position: absolute;
      top: 0px;
      left: 56px;
      background-color: aliceblue;
      width: 200px;
    }
    .letter::first-letter {
      font-size: 30px;
      color: blue;
    }
    .line::first-line {
      background-color: yellow;
      color: blue;
      font-size: 20px;
    }

    p::selection {
      background-color: red;
      color: white;
    }

 

 

 

 

* before,after 둘다 'content'와 같이 씌어야 함 

 

 

https://velog.io/@real-bird/CSS-before-after

 

[CSS] ::before / ::after

CSS의 의사 요소(pseudo elements)로, 특정 요소 일부분에 스타일을 입힐 때 사용

velog.io

 

 

728x90
반응형
LIST