Targeting elements on a specific page with CSS

Hi all, here’s a trick to use CSS to use .stk-page-nameofyourpage to target just one page in your app for CSS, rather than every page.

For instance, if you just wanted to change the text on your Add new button on your tasks page, you can use the below (note the two step approach using after).

.stk-page-tasks .stk-add-new-button .stk-button-text { font-size: 0px; }
.stk-page-tasks .stk-add-new-button .stk-button-text:after { font-size: 14px; content: 'Add Task'; }

Shout out to @boonshin for coming up with this tip :slight_smile:

2 Likes