CSS :lang() 의사 클래스 선택기는 lang 속성이 지정된 요소를 선택하는 데 사용됩니다. 이렇게 하면 콘텐츠와 관련된 특정 언어를 타겟팅하고 그에 따라 스타일을 지정하는 데 도움이 됩니다.
구문
다음은 구문입니다 -
:lang(){
/*declarations*/
} CSS :lang() 의사 클래스 선택기 −
의 예를 살펴보겠습니다.예시
<!DOCTYPE html>
<html>
<head>
<style>
p:lang(it)::after {
padding: 20px;
content: '~ Italian';
font-style: italic;
}
p:lang(es)::after {
padding: 8px;
content: '~ Spanish';
font-style: italic;
}
p:lang(en)::after {
padding: 20px;
content: '~ English';
font-style: italic;
}
</style>
</head>
<body>
<p lang='it'>Bella ciao</p>
<p lang='en'>Nice hello</p>
<p lang='es'>Bueno adios</p>
</body>
</html> 출력
CSS :lang() 유사 클래스 선택기의 또 다른 예를 살펴보겠습니다. -
예시
<!DOCTYPE html>
<html>
<head>
<style>
div{
margin: 10px;
padding: 10px;
text-align: center;
border: 1px solid black;
}
div:lang(it)::after {
padding: 20px;
content: '~ Italy';
font-style: italic;
}
div:lang(es)::after {
padding: 8px;
content: '~ Spain';
font-style: italic;
}
div:lang(nl)::after {
padding: 20px;
content: '~ Belgium';
font-style: italic;
}
div:lang(es){
background-image: linear-gradient(red 25%, yellow 25%, yellow 75%, red 75%);
}
div:lang(it){
background-image:linear-gradient(90deg, #00ae00 33.3%, white 33.3%, white 66.6%, red 66.6%);
}
div:lang(nl){
background-image:linear-gradient(90deg, black 33.3%, yellow 33.3%, yellow 66.6%, red 66.6%);
}
</style>
</head>
<body>
<div lang='it'>Rome</div>
<div lang='nl'>Brussels</div>
<div lang='es'>Madrid</div>
</body>
</html> 출력
