Quotes Property
Last updated: 2026-09-13
quotes Quotes Property
The quotes property customizes the quotation marks used by q elements and by content's open-quote/close-quote keywords. By default, the browser chooses them based on the language. It supports multiple pairs of quotes so nested quotations automatically switch styles — an important tool for international typography.
| Category | |
|---|---|
| Initial Value | depends on user agent |
| Inherited | Yes |
| Applies To | |
| Animation Type | |
| CSS Version | CSS2 |
| Status | Standard |
📝 Syntax
quotes: none | auto | <string> <string>+;⚙️ Values
| Value | Type | Description |
|---|---|---|
none | auto | Keyword | None or automatic |
<string> <string>+ | Value | Custom quote pairs |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| quotes | ✓ v10 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： Chinese commonly uses “” and ‘’, while English uses " " and ' '. Set the pairs to match your site's language.
Tip： quotes is an inherited property; setting it on a parent makes all descendants use the same quote style.
❓ FAQ
QWhat is the difference between quotes and inserting quotation marks directly with content?
Aquotes defines the quote characters, and used with content: open-quote/close-quote it automatically switches to the matching pair for each nesting level (first level “”, second level ‘’, and so on). Inserting a fixed string directly with content cannot sense the nesting level, so nested quotations all show the same pair. For multi-level nested quotes, use quotes with open-quote.
QHow do I disable automatic quotation marks?
ASet quotes: none, and q elements or content: open-quote no longer generate marks. quotes only affects the open-quote/close-quote keywords, not strings written directly in content. To fully customize, bypass the mechanism entirely with content: "「".
QHow do I set Chinese quotation marks for q elements?
AChinese convention uses “” for the outer level and ‘’ for the inner: quotes: "“" "”" "‘" "’";. The first pair is the outer open/close marks and the second pair is for nested quotes, with up to four levels supported. Once set, q elements switch automatically by nesting depth. Remember to separate each quote pair with a space and wrap every character in its own quotes.
QIs quotes inherited?
AYes. quotes is an inherited property, so setting it once on the document root or the quoting container applies the same pairs to all descendants, including q elements. The default value auto lets the browser choose based on the element's lang attribute and locale — for example, Chinese pages get “” automatically and English pages get "".
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
content Property
Output quotation marks with open-quote/close-quote
q Element
The HTML inline quotation element
