CSS Explain - A tool which calculates CSS selector specificity
Example input:
li.active a:link
Example output (specificity):
| 0 | 2 | 2 |
See also: https://www.codecaptain.io/tools/css-specificity-calculator Show archive.org snapshot
Related cards:
Test that a CSS selector is present with Cucumber
This note describes a Cucumber step definition that lets you test whether or not a CSS selector is present on the site:
Then I should see an element "#sign_in"
But I should not see an element "#sign_out"
Here is the step definition for C...
SlickMap CSS — A Visual Sitemapping Tool for Web Developers
SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation.
CSS has a well-supported :empty selector
All browsers + IE9 know the CSS :empty
selector. It lets you hide an element when it has no content, i.e. not even white space.
[(How to prevent whitespace in HAML)](https://haml.info/docs/yardoc/file...
Spreewald: Check that a CSS selector is present on the current page
Spreewald 1.3.0 comes with these steps:
Then I should see an element ".panel"
Then I should not see an element ".sidebar"
Then I should see an element ".twitter-timeline"
We recommend to [define a selector_for
method](https://githu...
Spreewald: Click on an element with a CSS selector
Spreewald 1.4.0 comes with this step:
When I click on the element ".sidebar"
We recommend to define a selector_for
method in features/support/selectors.rb
so you ...
hint.css - A tooltip library in CSS
A tooltip library that does not use Javascript. Works in IE9+.
This library (or the technique used by it) could be a great choice for projects with a lot of tooltips, which are hard to do fast with Javascript.
CSS: :where() pseudo selector
tl;dr
The
:where()
pseudo selector - zero specificity - matches against a comma-separated list of selectors.
Example
Compound selectors like ...
.datepicker .prev, .datepicker .next, .datepicker .switch
padding-botto...
CSS: :is() pseudo selector
tl;dr
The
:is()
pseudo selector - specificity of its most specific argument - matches against a comma-separated list of selectors.
Example
Compound selectors like ...
.datepicker .prev, .datepicker .next, .datepicker ....
Use CSS sibling selectors instead :last-child (or :first-child)
Often times you want to give a bunch of elements the same style, except for the last. For example borders or margins.
You probably commonly used the :last-child
CSS meta selector like so:
.foo {
border-bottom: 1px dashed #000;
}
.foo:las...
Inspect and Debug CSS Flexbox and Grid Layouts by using the Layouts Tab in Dev Tools
tl;dr
In Chrome DevTools in the Layouts tab you have handy options to debug CSS Flexbox and Grid. Including:
- Display size and lines along with labels
- Changing their attributes
- Change how overlay is colored and fastl...