-
Notifications
You must be signed in to change notification settings - Fork 0
/
element.jic
77 lines (64 loc) · 1.98 KB
/
element.jic
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
/*
These element queries have nothing to do with width, but extend the power of CSS selector - as long as they don't need to be used with interactive content. This means they aren't suitable for:
- interaction-based pseudo-classes like :hover, :focus, :active, etc
- queries on interactive content, like inside form elements
- dynamic HTML that will in structure after the page loads
- scroll position or dimensions
Where it might be useful:
- select by text content length
- select by regex search of text content
- select by string search of text content
- select direct parents of a CSS selector
- select ancestors of a CSS selector
- select previous sibling of a CSS selector
- select first instance of CSS selector in DOM
*/
/* Character count in text content */
${containerQuery('.headline h2', el => el.textContent.length > 10, `
:self {
font-size: 80%;
background: lime;
}
`)}
/* String match in text content */
${containerQuery('.string li', el => (el.textContent).indexOf('laughter') !== -1, `
:self {
background: hotpink;
}
`)}
/* Regex match in text content */
${containerQuery('.regex li', el => /laughter/.test(el.textContent), `
:self {
background: orange;
}
`)}
/* Parent Selector */
${containerQuery('.parent > ul', el => el.querySelector('.target') && el.querySelector('.target').parentNode === el, `
:self {
background: purple;
}
`)}
/* Ancestor Selector */
${containerQuery('.ancestor .goal', el => el.querySelector('.target'), `
:self {
border: 5px solid yellow;
}
`)}
/* Previous Sibling Selector */
${containerQuery('.previous *', el => el.nextElementSibling && el.nextElementSibling.classList.contains('target'), `
:self {
background: teal;
}
`)}
/* First of Selector in Document */
${containerQuery('.first span', el => el === document.querySelector('.first span'), `
:self {
background: hotpink;
}
`)}
/* Number of children */
${containerQuery('.children ul', el => el.children.length >= 3, `
:self {
background: lime;
}
`)}