id에 대한 정규식이있는 CSS

Question

첫 번째 및 세 번째 ID 만 빨간색으로 표시합니다. 그게 가능하니?

ID가 할 수있는 디자인을 무엇 아니다

#sections div[id^='s.*0'] { 
 
    color: red; 
 
}

<div id="sections"> 
 
<div id="s10">one</div> 
 
<div id="s2">two</div> 
 
<div id="s30">three</div> 
 
<div id="t1">four</div> 
 
</div>

Answer 1

특수한 CSS 선택기를 사용할 수 있습니다. id$='0'은 id가 0으로 끝나고 id^='s'은 id가 s로 시작한다는 것을 의미합니다.

#sections div[id$='0'][id^='s'] { 
 
    color: red; 
 
}

<div id="sections"> 
 
<div id="s10">one</div> 
 
<div id="s2">two</div> 
 
<div id="s30">three</div> 
 
<div id="t1">four</div> 
 
</div>

Answer 2

는, CSS는 정규식을 지원하지 않습니다. 그러나 귀하의 솔루션은 클래스를 사용하는 것입니다.

#sections .s-class { 
    color: red; 
} 
<div id="sections"> 
    <div id="s10" class='s-class'>one</div> 
    <div id="s2" class='s-class'>two</div> 
    <div id="s30" class='s-class'>three</div> 
    <div id="t1">four</div> 
</div> 

해당 특정 클래스의 사람들 만 영향을받습니다.

Answer 3

당신은 그 요소가이 속성 선택기 ([id^="s"])로 시작하여 s로 시작하고 속성을 선택과 끝을 사용하여 0으로 끝나는 ID를 가지고 있다는 사실을 사용할 수 있습니다 ([id$="0"]) :

#sections div[id^="s"][id$="0"] { 
 
    color: red; 
 
}

<div id="sections"> 
 
<div id="s10">one</div> 
 
<div id="s2">two</div> 
 
<div id="s30">three</div> 
 
<div id="t1">four</div> 
 
</div>

,

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Answer 4

은 또는 당신은 의사 선택 사용할 수 있습니다

#sections:nth-child(1), #sections:nth-child(3) { 
    color:red; 
} 

그것은 IE8 이하에서 지원되지 않는,하지만 다른 곳에서 잘해야한다.