Selectors
-
:previousto select the previous element sibling -
:parentto select the parent element -
:closest(selector)to select the closest ancestor matching a selector -
:ancestor(selector)to select all ancestors matching a selector -
[attribute < number]select if attribute is less than a number -
[attribute > number]select if attribute is greater than a number -
[attribute <= number]select if attribute is less or equal to a number -
[attribute >= number]select is attribute is greater or equal to a number -
:attribute(partial-name-*)select by partial attribute match -
:tag(partial-name-*)select by partial tag name match
At-Rules
@element selector (condition) { stylesheet }
Units
-
ew1% of element's width -
eh1% of element's height -
eminequal tomin(1ew, 1eh) -
emaxequal tomax(1ew, 1eh)
Values
-
auto-expandas a value forwidthandheightproperties -
offsetWidth,offsetHeight,offsetLeft,offsetTop -
scrollWidth,scrollHeight,scrollTop,scrollLeft -
innerHTML.length,value.length - cursor
Xposition, cursorYposition
Properties
-
aspect-ratioto set height based on the element's width and a ratio
Functions
-
clamp(min, mid, max)to limit scalable values with a minimum and maximum -
round(number)gives the nearest integer to a given number -
floor(number)gives the largest integer equal or less than a given number
Top comments (2)
I'm still waiting on the :has selector - if it ever reaches maturity, I'd be using it all over the place
It's been in the spec for 4 years, but no browsers have found a way to implement it in an efficient enough way, so until then we have to use JavaScript. I see
this:has(that)as something likeArray.from(document.querySelectorAll(this)).filter(tag => tag.querySelector(that)), so to make that a little more useful I would write a helper function like this: codepen.io/tomhodgins/pen/KZydyLI'm using a little plugin to read JS-in-CSS so I can write it from my stylesheet, here's a little more about how that's working, but as long as you could run this helper function on the right events it would mark up elements in the DOM that match our
:has()rule and give them unique attributes. Then the function returns a string which is text of a CSS stylesheet, with the rules written targeting the elements with our new unique attributes. As long as you can populate a stylesheet in DOM or CSSOM with the CSS that the function returns it will work: codepen.io/tomhodgins/post/what-is...