CSS with regex
https://stackoverflow.com/questions/42497352/css-with-regex-for-id
https://developer.mozilla.org/pl/docs/Web/CSS/Attribute_selectors
https://kimblim.dk/css-tests/selectors/
* ^ $ 만으로도 쉽게 regex를 사용하여 css를 활용할수 있다.
onetwothreefour\t\t
- Internal link
\t- Example link
\t- Insensitive internal link
\t- Example org link
\t
/* * 모두 */
[class*='row']{
\tborder: 1px solid blue;
\tmargin: 16px;
}
/* ^ 시작 */
[class^='aa']{
\tcolor: red;
}
/* ^ 끝 */
[class$='even']{
\tfont-weight: 900;
}
#sections div[id^='s'][id$='1'] {
color: yellow;
}
/* elements with a title attribute */
a[title] {
color: purple;
}
/* elements with an href matching "https://example.org" */
a[href="https://example.org"] {
color: green;
}
/* elements with an href containing "example" */
a[href*="example"] {
font-size: 2em;
}
/* elements with an href ending ".org" */
a[href$=".org"] {
font-style: italic;
} | ↓ Selector / Browser → | IE9 preview | FF 3.6 | Safari 4 | Opera 10.5 beta |
|---|---|---|---|---|
| E ~ F | YES | YES | YES | YES |
| E[attr^=”name”] | YES | YES | YES | YES |
| E[attr$=”name”] | YES | YES | YES | YES |
| E[attr*=”name”] | YES | YES | YES | YES |
| E[attr|=”name”] | YES | YES | YES | YES |
| E:root | YES | YES | YES | YES |
| E:nth-of-type | YES | YES | YES | YES |
| E:nth-last-of-type | YES | YES | YES | YES |
| E:first-of-type | YES | YES | YES | YES |
| E:last-of-type | YES | YES | YES | YES |
| E:only-of-type | YES | YES | YES | YES |
| E:only-child | YES | YES | YES | YES |
| E:last-child | YES | YES | YES | YES |
| E:nth-child | YES | YES | YES | YES |
| E:nth-last-child | YES | YES | YES | YES |
| E:empty | YES | YES | YES | YES |
| E:target | YES | YES | YES | YES |
| E:checked | YES | YES | YES | YES |
| E::selection | YES | NO | YES | YES |
| E:enabled | YES | YES | YES | YES |
| E:disabled | YES | YES | YES | YES |
| E:not(s) | YES | YES | YES | YES |
| ↑ Selector / Browser → | IE9 preview | FF 3.6 | Safari 4 | Opera 10.5 beta |
