Style Portfolio Items by Link URL

What You'll Create

Style individual portfolio grid items in Squarespace differently based on where they link to. Items linking to specific URLs get custom background colors, borders, or any CSS styling—automatically, without adding custom classes to each item.

The Problem It Solves

Squarespace doesn't offer a way to style individual portfolio items differently without manually adding custom code to each one. This technique uses the link destination as a built-in identifier, letting you target items programmatically.

Perfect For

Highlighting featured projects, color-coding portfolio categories, distinguishing external vs internal links, creating visual hierarchy in grids, spotlighting new work.

What Makes This Different

Targets links containing specific text in their URLs. No JavaScript required. Works automatically when you add new portfolio items with matching URLs.

Details

• Section Type: Fluid & Classic

• Code Type: CSS

• Prerequisites: Portfolio section with linked items

• Toolkit Title: Styling Portfolio List Items based on their Links

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support