Use css from parent in children

PHOTO

Wed Feb 26 2025 18:33:32 GMT+0000 (Coordinated Universal Time)

Saved by @gbritgs

//Parent
:host {
    --font-size-1: 0.625rem;
    --font-size-2: 0.75rem;
    --color-gray-9: #f203ba;
}

//Child
.header-container h3 {
    font-size: 1rem;
    color: var(--color-gray-9);
    margin: 0.25rem 0 0 0;
    line-height: 1.5;
}

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

LWC

@gbritgs

Adding new attributes to an array of objects Comparing attributes from two arrays of objects Filtering array by search bar Filtering array by attribute Rendering an indexed list with clickable rows Get all keys/values from an object Parse a JSON from Apex in Lightning Web Components Generic function for toast notification Overlay combobox in modal Clear input fields with button Return specific attribute from array using map Getting values from table row on click Validate required fields Custom related list with tree grid Open records on subtab Force CSS styling Use css from parent in children Custom Tooltip with Pointer

CSS

@gbritgs

Pseudo-classes Global Reset for Margins and Paddings Center Content Dinamically Use css from parent in children Custom Tooltip with Pointer

Browse more snippets >>