CSS with regex for id

Published onesixx on

https://stackoverflow.com/questions/42497352/css-with-regex-for-id

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

 id$='0'  는 id가 0으로 끝나는 거
 id^='s'  는 id 가 s로 시작하는 거 

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

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

 

https://developer.mozilla.org/pl/docs/Web/CSS/Attribute_selectors

/* <a> elements with a title attribute */
a[title] {
  color: purple;
}

/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

/* <a> elements with an href containing "example" */
a[href*="example"] {
  font-size: 2em;
}

/* <a> elements with an href ending ".org" */
a[href$=".org"] {
  font-style: italic;
}

 

https://kimblim.dk/css-tests/selectors/

CSS 3
↓ Selector / Browser → IE8 IE9 preview FF 3.6 Safari 4 Chrome 5 beta Opera 10.5 beta
↑ Selector / Browser → IE8 IE9 preview FF 3.6 Safari 4 Chrome 5 beta Opera 10.5 beta
E ~ F YES YES YES YES YES YES
E[attr^=”name”] YES YES YES YES YES YES
E[attr$=”name”] YES YES YES YES YES YES
E[attr*=”name”] YES YES YES YES YES YES
E[attr|=”name”] YES YES YES YES YES YES
E:root NO YES YES YES YES YES
E:nth-of-type NO YES YES YES YES YES
E:nth-last-of-type NO YES YES YES YES YES
E:first-of-type NO YES YES YES YES YES
E:last-of-type NO YES YES YES YES YES
E:only-of-type NO YES YES YES YES YES
E:only-child NO YES YES YES YES YES
E:last-child NO YES YES YES YES YES
E:nth-child NO YES YES YES YES YES
E:nth-last-child NO YES YES YES YES YES
E:empty NO YES YES YES (3) YES YES
E:target NO YES YES YES YES YES
E:checked NO YES YES YES YES YES
E::selection NO YES NO YES YES YES
E:enabled NO YES YES YES YES YES
E:disabled NO YES YES YES YES YES
E:not(s) NO YES YES YES YES YES

 

 

 

 

Categories: Presentation

onesixx

Blog Owner

Leave a Reply

Your email address will not be published.