답변:
전통적인 의미는 아니지만 HTML에 액세스 할 수있는 경우이를 위해 클래스를 사용할 수 있습니다. 이걸 고려하세요:
<p class="normal">Text</p>
<p class="active">Text</p>CSS 파일에서 :
p.normal {
background-position : 150px 8px;
}
p.active {
background-position : 4px 8px;
}이것이 CSS 방식입니다.
그런 다음 Sass 와 같은 CSS 전처리 기가 있습니다. 당신이 사용할 수있는 조건문 이이 같은 which'd 살펴 :
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}단점은 스타일 시트를 사전 처리해야한다는 점과 조건이 런타임이 아닌 컴파일 시간에 평가된다는 것입니다.
적절한 CSS의 새로운 기능은 사용자 정의 속성 (일명 CSS 변수)입니다. 런타임에 평가됩니다 (지원하는 브라우저에서).
그들과 함께 당신은 라인을 따라 뭔가를 할 수 있습니다.
:root {
--main-bg-color: brown;
}
.one {
background-color: var(--main-bg-color);
}
.two {
background-color: black;
}마지막으로 선호하는 서버 측 언어로 스타일 시트를 사전 처리 할 수 있습니다. PHP를 사용하는 style.css.php경우 다음과 같은 파일을 제공합니다 .
p {
background-position: <?php echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}이 경우 이러한 스타일 시트를 캐싱하기가 어렵 기 때문에 성능에 영향을 미칩니다.
아래는 여전히 유효한 내 오래된 답변이지만 오늘은 더 의견이 많은 접근 방식이 있습니다.
CSS가 너무 짜증나는 이유 중 하나는 조건부 구문이 없기 때문입니다. CSS는 그 자체로 현대 웹 스택에서 완전히 사용할 수 없습니다. 잠시 동안 SASS를 사용하면 내가 왜 그렇게 말하는지 알게 될 것입니다. SASS에는 조건부 구문이 있으며 기본 CSS에 비해 많은 다른 이점도 있습니다.
이전 답변 (아직 유효 함) :
일반적으로 CSS에서는 할 수 없습니다!
다음과 같은 브라우저 조건이 있습니다.
/*[if IE]*/
body {height:100%;}
/*[endif]*/그러나 아무도 Javascript를 사용하여 DOM을 변경하거나 클래스를 동적으로 할당하거나 각 프로그래밍 언어로 스타일을 연결하는 것을 막을 수 없습니다.
나는 때때로 CSS 클래스를 뷰에 문자열로 보내고 그 (php)와 같은 코드에 에코합니다.
<div id="myid" class="<?php echo $this->cssClass; ?>">content</div>CSS에서 일종의 조건부이기도 한 CSS 의사 클래스를 아무도 언급하지 않았다는 사실에 놀랐습니다. 이것으로 자바 스크립트 한 줄없이 꽤 진보 된 일을 할 수 있습니다.
일부 의사 클래스 :
예:
div { color: white; background: red }
input:checked + div { background: green }<input type=checkbox>Click me!
<div>Red or green?</div>css 파일을 PHP로 구문 분석하도록 서버를 설정 한 다음 간단한 PHP 문으로 변수 변수를 정의합니다.
물론 이것은 당신이 PHP를 사용하고 있다고 가정합니다 ...
@import url('dynamic.css.php').
(예, 오래된 스레드입니다.하지만 다른 사람들도 관심을 가질 수 있도록 Google 검색 상단에 표시되었습니다.)
if / else-logic은 자바 스크립트로 수행 될 수 있으며, 이는 차례로 스타일 시트를 동적으로로드 / 언로드 할 수 있습니다. 나는 이것을 브라우저 등에서 테스트하지 않았지만 작동해야합니다. 이렇게하면 시작할 수 있습니다.
http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
모든 조건 범위에 대해 컨테이너 div를 추가 할 수 있습니다.
컨테이너 div에 조건 값을 클래스로 추가합니다. (서버 측 프로그래밍-php / asp ...)
<!--container div-->
<div class="true-value">
<!-- your content -->
<p>my content</p>
<p>my content</p>
<p>my content</p>
</div>이제 각 요소에 클래스를 추가하지 않고도 중첩 된 선택기를 사용하여 div의 모든 요소에 대한 전역 변수로 컨테이너 클래스를 사용할 수 있습니다.
.true-value p{
background-color:green;
}
.false-value p{
background-color:red;
}이러한 목적으로 자바 스크립트를 다음과 같이 사용할 수 있습니다.
var myVar = 4;
if(myVar == 5){
document.getElementById("MyElement").className = "active";
}
else{
document.getElementById("MyElement").className = "normal";
}.active{
background-position : 150px 8px;
background-color: black;
}
.normal{
background-position : 4px 8px;
background-color: green;
}
div{
width: 100px;
height: 100px;
}<div id="MyElement">
</div>CSS는 멋지게 설계된 패러다임이며 많은 기능이 많이 사용되지 않습니다.
조건 및 변수가 전체 문서 또는 일부 요소의 범위에 일부 값의 변경을 배포하는 메커니즘을 의미하는 경우 다음 방법을 사용합니다.
var myVar = 4;
document.body.className = (myVar == 5 ? "active" : "normal");body.active .menuItem {
background-position : 150px 8px;
background-color: black;
}
body.normal .menuItem {
background-position : 4px 8px;
background-color: green;
}<body>
<div class="menuItem"></div>
</body>이렇게하면 CSS 스타일 전체에 변수의 영향을 분산시킬 수 있습니다. 이것은 @amichai 및 @SeReGa가 제안하는 것과 유사하지만 더 다양합니다.
이러한 또 다른 트릭은 문서 전체에 일부 활성 항목의 ID를 배포하는 것입니다 (예 : 메뉴를 강조 표시 할 때 다시) : (Freemarker 구문 사용)
var chosenCategory = 15;
document.body.className = "category" + chosenCategory;<#list categories as cat >
body.category${cat.id} .menuItem { font-weight: bold; }
</#list><body>
<div class="menuItem"></div>
</body>물론 이것은 카테고리 나 주와 같은 제한된 항목 세트에서만 실용적이며 e-shop 상품과 같은 무제한 세트가 아닙니다. 그렇지 않으면 생성 된 CSS가 너무 큽니다. 그러나 정적 오프라인 문서를 생성 할 때 특히 편리합니다.
생성 플랫폼과 함께 CSS로 "조건"을 수행하는 또 다른 트릭은 다음과 같습니다.
.myList {
/* Default list formatting */
}
.myList.count0 {
/* Hide the list when there is no item. */
display: none;
}
.myList.count1 {
/* Special treatment if there is just 1 item */
color: gray;
}<ul class="myList count${items.size()}">
<!-- Iterate list's items here -->
<li>Something...</div>
</ul>다른 경우가 아닌 삼항 연산자를 사용하여 html로 수행하십시오.
class = "{{조건? 'class1': 'class2'}}"
또는
[ngClass] = "조건? 'class1': 'class2'"