The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →In CSS, inherit sets a property on an element to the computed value of that same property on its parent in the document tree. It works whether or not the property normally inherits automatically. For example, color usually inherits by default, but border does not—unless you explicitly write border: inherit.
What does inherit mean in CSS?
inherit is a CSS-wide keyword. Use it as a property’s value to request that the element take that property’s computed value from its parent. The parent is the element directly above it in the document tree, not necessarily the element that visually contains it.
As an Amazon Associate I earn from qualifying purchases.
.parent {
color: rebeccapurple;
}
.child {
color: inherit;
}Here, the child’s computed color is the parent’s computed color. Because color normally inherits when no other value is specified, this explicit declaration often produces the same result as leaving the child’s color unset. It is more useful when a declaration would otherwise give the child a different value, or when you want a normally non-inherited property to take its parent’s value.
Free tools Windows power users keep installed
One-click scans. No signup required.
How do I make a property inherit from its parent?
Write inherit as the value of the specific property you want to inherit. It applies to that property only; it does not copy all of the parent’s styles.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
.parent {
border: 1px solid;
}
.child {
border: inherit;
}Borders do not normally inherit. The explicit declaration makes the child request the parent’s computed border value. Check a property’s reference to find whether it inherits by default; do not assume that every property does.
Inheritance depends on the document tree
A child inherits from its parent element in the document tree, not from whichever element happens to surround it visually or establish its containing block. On the root element, there is no parent to inherit from, so inherit resolves to that property’s initial value.
inherit vs. initial, unset, and rollback keywords
| Keyword | Effect |
|---|---|
inherit |
Use the parent’s computed value for this property. It always requests inheritance, even for a property that does not inherit by default. |
initial |
Use the property’s initial value. |
unset |
Act like inherit for a property that normally inherits; otherwise act like initial. |
revert |
Roll the value back to one from an earlier cascade origin. |
revert-layer |
Roll the value back to one from an earlier cascade layer. |
The practical distinction is that inherit always asks for the parent’s computed value. unset makes that choice depend on the property’s normal inheritance behavior. These CSS-wide keywords are available as values for properties, including custom properties.
When should I use inherit?
- Use it for a targeted override when a child should match its parent for a particular property.
- Use it to pass down a value for a property that does not normally inherit, such as a border.
- Prefer naming the property you want to inherit over copying every property with
all.
Use caution with all: inherit
all: inherit requests the parent’s computed values for all properties to which the all shorthand applies. This can copy layout-affecting values as well as visual ones. For example, if inline children of a paragraph inherit its block-level display value, their layout can change unexpectedly. If you only need matching text color, write color: inherit; if you only need matching font weight, write font-weight: inherit.
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
How inheritance works with shorthand properties
Leaving a component out of a shorthand does not make that component inherit. Omitted shorthand components receive their initial values. To inherit just one component, set that component’s longhand explicitly to inherit.
/* Inherit only the border color; set the other border components separately. */
.child {
border-width: 1px;
border-style: solid;
border-color: inherit;
}Or skip the browser setup
To inspect a page’s rendered appearance without setting up a local browser capture, make one request to the ScreenshotNeo API:
Quick Recap
Best Value
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, and failed loads are not billed. Its MCP server lets AI agents take screenshots, and the free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Learn about ScreenshotNeo or sign up for 1,000 free screenshots a month with no card.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
