Gerillass
v2.1.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.
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. You can also make multiple selections. |
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;
}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;
}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;
}