Selectors

Introduction

The Get Started guide present basic selectors which are plenty enough in most cases. However, linne comes with some more sophisticated ones if needed.

Basics

Below are the basic selectors available in linne.

  • sel_id() - Select an object by its id, e.g.: sel_id('btn') selects shiny::actionButton('btn', 'Button').
  • sel_all() - Selects everything, will apply a change to every element of the page.
  • sel_input() - Selects an input by its id, e.g.: sel_id('txt') selects shiny::textInput('txt', 'Text').
  • sel_class() - Select all elements bearing a specific class, e.g.: sel_class('cls'), selects shiny::h1('hello', class = 'cls').
  • sel_tag() - Select all tags, e.g.: sel_tag('p') selects p('hello').
  • sel_attr() - Select all tags with a specific attribute.

Examples

sel_id("btn")
#> ℹ CSS selector: #btn
sel_class("aClass")
#> ℹ CSS selector: .aClass

Operators

You can also use some special operators to broaden or narrow down the selection.

  • %child% - Selects elements where right hand is child of left hand, e.g.: sel_tag('div') %child% sel_class('aClass') selects elements with aClass who are direct children of div tags.
  • %or% - Select left hand or right hand, e.g.: sel_id('myId') %or% sel_class('myClass') will select both the element with the id and elements with the class. Ideal to select and apply changes multiple elements at once.
  • %with% - Left hand selector with right hand selector, e.g.: sel_tag('div') %with% sel_class('aClass') selects a div with a class of aClass. Ideal to narrow down the selection.

Examples

sel_id('myId') %or% sel_class('myClass')
#> ℹ CSS selector: #myId,.myClass
sel_tag('div') %with% sel_class('aClass')
#> ℹ CSS selector: div.aClass

When

You can also use the when_* family of functions to narrow the selection based on the state of the element.

  • when_active() - Only select only active links.
  • when_hover() - Only select when the element is hovered.
  • when_focus() - Only select when the elements is focused.

Examples

sel_tag("a") # select all a tag
#> ℹ CSS selector: a
sel_tag("a") %>% when_active() # selects a tags that are active
#> ℹ CSS selector: a:active
sel_id("myId") %>% when_hover()
#> ℹ CSS selector: #myId:hover