jQuery를 사용한 유일한 자식인 버튼 스타일링

아래는 jQuery를 사용하여 div 요소 아래에 유일한 자식으로 있는 버튼에 스타일을 적용하는 예제입니다.

$( "div button:only-child" ).text( "Alone" ).css( "border", "2px blue solid" );

설명:

1. $() 함수를 사용하여 jQuery 선택자를 지정합니다.
2. "div button:only-child"는 div 요소 아래에 있는 유일한 자식으로 있는 버튼을 선택합니다.
3. text() 함수를 사용하여 선택된 버튼의 텍스트를 "Alone"으로 변경합니다.
4. css() 함수를 사용하여 선택된 버튼에 파란색 실선 테두리를 적용합니다.

예제 2: 유일한 자식인 이미지에 스타일 적용하기

$( "div img:only-child" ).css( "width", "100px" ).css( "height", "100px" );

설명:
이 예제는 div 요소 아래에 있는 유일한 자식으로 있는 이미지에 스타일을 적용하여 크기를 100px로 변경합니다.

예제 3: 유일한 자식인 입력 필드에 스타일 적용하기

$( "div input:only-child" ).css( "background-color", "#f0f0f0" ).css( "border-radius", "5px" );

설명:
이 예제는 div 요소 아래에 있는 유일한 자식으로 있는 입력 필드에 배경색과 테두리를 적용하여 둥근 테두리를 만듭니다.