How to style elements inside a class (combinators)

In TeleportHQ, a combinator styles elements based on where they sit compared with a class. For example, .card img styles every image inside an element with the card class, without giving each image its own class. Right-click the class in the Classes tab, choose Add CSS Combinator, pick a type, type what to target, and add styles.

Before you start#

• You need a class to build on. See How to create a CSS class.
• You need a role that can change CSS classes.
• The Classes tab calls these "combinators". The Classes section of the right panel calls them "compound classes". They're the same thing.

Which combinator to pick#

Steps#

1. Press Esc, or click an empty part of the canvas, so no element is selected.
2. At the top of the right panel, click the Classes tab.
3. Click the class's category to open it, then right-click the class, for example .card.
4. Click Add CSS Combinator. The four types open beside it.
5. Click Descendant combinator. The combinator is created and the Edit class panel opens. It shows the class in a list and the target p in a box next to it.
6. Replace p with what you want to target, for example img, and press Enter.
7. In Properties, add a style, for example border-radius with the value 8px. Press Enter.

The combinator is listed under its class. Click the arrow at the end of the class's row (tooltip Expand combinators) to see it.

Check that it worked#

Every image inside an element with the card class now has rounded corners on the canvas. Images outside cards don't change.

Add a combinator from the right panel#

1. Select an element that uses the class.
2. In the Classes section, on the class's row, click + (tooltip Create compound class). A descendant combinator with the target p is created and opens in the Edit class panel.
3. Change the target, then add styles.

When the class already has combinators, the row shows an arrow (tooltip Show compound classes) instead of the +. Click it to list them. Under the list, the + adds another one.

Style something when the class is hovered#

A target that starts with a colon attaches to the class itself instead of looking inside it:

• :hover becomes .card:hover and styles the card while the mouse is over it.
• :hover img becomes .card:hover img and styles the images inside a card while the card is hovered. For example, add transform with the value scale(1.05).

For hover on the class itself, the class's own States section is often simpler. See How to edit a CSS class. Hover effects show in Preview, not on the canvas.

A target that starts with a dot is added without a space: .featured becomes .card.featured, which styles elements that have both classes.

Troubleshooting#

"Class name already defined" The class already has a combinator with that target. Edit the existing one.

My new combinator's target got a number added, like p1 When you add a combinator with the same starting target as an existing one, TeleportHQ adds a number to keep it unique, which makes it match nothing. Change the target right away to what you want, for example img.

I cleared the target and nothing changed An empty target isn't saved. The combinator keeps its old target. Type a new one instead, for example img.

The combinator doesn't style my text The target must match the element's HTML tag. To see an element's tag, select it and open Attributes in the right panel: Tag shows it, for example h2 for a section heading. To see tags in the layers tree, click the Project settings cog at the bottom of the left sidebar, then Editor → Preferences → View, and under Layers turn on HTML element tags in the tree view.

Good to know#

• Deleting a class also deletes all its combinators.
• To delete one combinator from the Classes tab, point at it and click its ×. It's deleted right away, without confirmation. From the right panel, TeleportHQ asks "Are you sure you want to delete the selected compound-class?"
• To move a combinator to another class, pick the class in the list in front of the target in the Edit class panel.
• Combinators always stay in their class's category.
• To copy a class together with its combinators, right-click the class and choose Duplicate with combinators.
• Some default classes already have combinators, for example thq-input::placeholder for the placeholder text of inputs.