Gerillass 3.0.0 is out. One gradient mixin replaces two, and text-gradient takes its colours first, so read the migration guide before you upgrade.
Gerillass
v3.0.0* You can call mixins with or without the gls- namespace (e.g. @include gls-only();).
The Only Sass mixin helps you filter elements based on their position among a group of siblings and apply your style rules to only those elements. This mixin uses :first-of-type, :last-of-type, and :nth-of-type CSS pseudo-classes.
You can pass a string value to target elements by their id, class, or pseudo-class selector. Or you can pass a number (or multiple numbers separated by commas) to target items by their index position in the list.
Arguments
| Name | Type | Description |
|---|---|---|
$params… | string | The pseudo-class, class, or id selector. Accepts first, last, odd, even, and class or id selectors. |
$params… | number | The index number of the element in the list, a whole number counted from 1, or from the end when negative. You can also make multiple selections. A number with a unit, a fraction and 0 are refused. |
Important: Passing multiple arguments only works with numeric values, and the values must be separated by commas.
Examples
Suppose you have a group of items like the ones below, and you want to apply style changes to only some of them.
<div class="list-wrapper">
<div class="list-item">01</div>
<div class="list-item">02</div>
<div class="list-item">03</div>
<div class="list-item">04</div>
<div class="list-item">05</div>
<div class="list-item">06</div>
</div>Let's start with the first one!
.list-wrapper{
.list-item{
@include only(first) {
background-color: #5bc0bb;
color: white;
}
}
}.list-wrapper .list-item:first-of-type {
background-color: #5bc0bb;
color: white;
}Now, let's try to get the last item in the list.
.list-wrapper{
.list-item{
@include only(last) {
background-color: #5bc0bb;
color: white;
}
}
}.list-wrapper .list-item:last-of-type {
background-color: #5bc0bb;
color: white;
}Now, let's target the second item in the list.
.list-wrapper{
.list-item{
@include only(2) {
background-color: #5bc0bb;
color: white;
}
}
}.list-wrapper .list-item:nth-of-type(2) {
background-color: #5bc0bb;
color: white;
}Let's get the elements whose position is odd (e.g. 1, 3, 5, and so on).
.list-wrapper{
.list-item{
@include only(odd){
background-color: #5bc0bb;
color: white;
}
}
}.list-wrapper .list-item:nth-of-type(odd) {
background-color: #5bc0bb;
color: white;
}Remember that when you make a multiple selection, the arguments you pass must be numbers separated by commas.
Now, let's try something really fancy!
.list-wrapper{
.list-item{
@include only(4, 5, 6) {
background-color: #5bc0bb;
color: white;
}
}
}.list-wrapper .list-item:nth-of-type(4), .list-wrapper .list-item:nth-of-type(5), .list-wrapper .list-item:nth-of-type(6) {
background-color: #5bc0bb;
color: white;
}Information: You can pass negative values to target elements based on their position among a group of siblings, counting from the end.
Now suppose you don't know how many items will appear in the list, and you want to target only the third item from the end. How can you do that? It's surprisingly easy!
.list-wrapper {
.list-item {
@include only(-3) {
background-color: #5bc0bb;
color: white;
}
}
}.list-wrapper .list-item:nth-last-of-type(3) {
background-color: #5bc0bb;
color: white;
}Now let's pass multiple negative values.
.list-wrapper {
.list-item {
@include only(-1, -2, -4) {
background-color: #5bc0bb;
color: white;
}
}
}.list-wrapper .list-item:nth-last-of-type(1), .list-wrapper .list-item:nth-last-of-type(2), .list-wrapper .list-item:nth-last-of-type(4) {
background-color: #5bc0bb;
color: white;
}Now let's pass positive and negative values together.
.list-wrapper {
.list-item {
@include only(1, -2) {
background-color: #5bc0bb;
color: white;
}
}
}.list-wrapper .list-item:nth-of-type(1), .list-wrapper .list-item:nth-last-of-type(2) {
background-color: #5bc0bb;
color: white;
}What it refuses
A position has to be a whole number. Until 2.3.1 anything numeric went into the selector as it was, and measured in Chrome 152, :nth-of-type(10px) and :nth-of-type(1.5) are invalid selectors, so the browser drops the whole rule. In a list of positions one bad value took the good ones with it: only(1, 10deg) styled nothing.
.list-item {
@include only(10px) {
color: red;
}
}Error: `10px` is not a valid position for `only`: a position is a whole number such as `2`, or a multiple of n such as `3n`, and `:nth-of-type(10px)` is an invalid selector, so the browser would drop the rule. Pass a number such as `2`, or `-2` to count from the end.A multiple of n is a position too: only(3n) writes :nth-of-type(3n) and selects every third element. An offset cannot be added, though, because Sass does the arithmetic before the mixin sees it: only(2n+1) arrives as 3n and selects every third element, not the odd ones. For those, pass odd or even.
0 is valid CSS but matches nothing, because positions count from 1.
.list-item {
@include only(0) {
color: red;
}
}Error: `0` is not a valid position for `only`: positions count from 1, so `:nth-of-type(0)` matches nothing. Pass `1` for the first, or `-1` for the last.With several arguments every one of them is a position, so a keyword or a selector goes on its own.
.list-item {
@include only(1, "first") {
color: red;
}
}Error: `"first"` is not a valid position for `only`: several arguments are all positions, whole numbers such as `1` or `-2`. Pass a keyword such as `first`, or a selector such as `.foo`, on its own.