CSS Definition of Switch vs Dimmer

[josh]

This post shares some tips, including a video, on how you can find the selectors and structure that’s used:

CSS Targeting Specific Super-Tile

It’s included in the linked thread. One other thing you might find helpful is most browser Dev Tools usually have a “Select Element” type of feature where you can then click an item on the page and it will bring up the matching element within the “Elements” (DOM) structure. Sometimes it’s helpful to then take a moment to review the structure to get a feel for how it’s laid out. In this case, you can see the data-entity-idx mentioned in the previous post which could be used with CSS selector …

The Switch Level tile layout is .switch-level

@josh

Not sure what you mean as there is a hierarchy defined in the DOM structure.

• There’s typically a main div with the class .tile as well as a class representing the type of device (eg. .switch, .switch-level, .button)
  • Then under that are divs/spans for holding key tile information eg. .title, .main-content, .footer.
    • Inside your .main-content you’ll typically find the .icon.
    • Inside the .footer you’ll typically find supplemental information and extra actions.

Again, this DOM structure may change with future updates.