File indexing completed on 2024-05-12 04:02:06
0001 <!DOCTYPE html> 0002 <html><head> 0003 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 0004 <title>highlight.css</title> 0005 <meta name="generator" content="KF5::SyntaxHighlighting - Definition (CSS) - Theme (Breeze Light)"/> 0006 </head><body style="background-color:#ffffff;color:#1f1c1b"><pre> 0007 <span style="color:#898887">/**</span> 0008 <span style="color:#898887"> * This is a pseudo CSS file to test Kate's CSS syntax highlighting.</span> 0009 <span style="color:#898887"> */</span> 0010 0011 <span style="color:#898887">/* Properties */</span> 0012 0013 body { 0014 <span style="font-weight:bold">font-size</span><span style="color:#924c9d">:</span> <span style="color:#b08000">15</span><span style="color:#0057ae">pt</span><span style="color:#ca60ca">;</span> 0015 <span style="font-weight:bold">font-family</span><span style="color:#924c9d">:</span> Verdana<span style="color:#ca60ca">,</span> Helvetica<span style="color:#ca60ca">,</span> <span style="color:#bf0303">"Bitstream Vera Sans"</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">sans-serif</span><span style="color:#ca60ca">;</span> 0016 <span style="font-weight:bold">margin-top</span><span style="color:#924c9d">:</span> <span style="color:#b08000">0</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> <span style="color:#898887">/* yet another comment */</span> 0017 <span style="font-weight:bold">margin-bottom</span><span style="color:#924c9d">:</span> <span style="color:#b08000">0</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> 0018 <span style="color:#bf0303;text-decoration:underline">// this is no comment, it's just broken!</span> 0019 <span style="font-weight:bold">background-color</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">hsl(</span><span style="color:#b08000">0</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">0</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">,</span> <span style="color:#644a9b">calc(</span><span style="color:#b08000">95</span><span style="color:#0057ae">%</span> <span style="color:#ca60ca">-</span> <span style="color:#b08000">3</span><span style="color:#0057ae">%</span><span style="color:#644a9b">))</span><span style="color:#ca60ca">;</span> 0020 <span style="font-weight:bold">font-family</span><span style="color:#924c9d">:</span> <span style="color:#bf0303">"Droid Sans"</span><span style="color:#ca60ca">,</span> Arial<span style="color:#ca60ca">,</span> <span style="color:#b08000">sans-serif</span><span style="color:#ca60ca">;</span> 0021 <span style="font-weight:bold">font-size</span><span style="color:#924c9d">:</span> <span style="color:#b08000">11</span><span style="color:#0057ae">pt</span><span style="color:#ca60ca">;</span> 0022 <span style="font-weight:bold">line-height</span><span style="color:#924c9d">:</span> <span style="color:#b08000">1.5</span><span style="color:#0057ae">em</span><span style="color:#ca60ca">;</span> 0023 <span style="font-weight:bold">background</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">#fff000</span><span style="color:#ca60ca">;</span> 0024 <span style="font-weight:bold">text-shadow</span><span style="color:#924c9d">:</span> <span style="color:#b08000">0</span> <span style="color:#b08000">0</span> <span style="color:#b08000">2</span><span style="color:#0057ae">px</span> <span style="color:#644a9b">rgba(</span><span style="color:#b08000">0</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">0</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">0</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">0.3</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> 0025 <span style="font-weight:bold">box-sizing</span><span style="color:#924c9d">:</span> <span style="color:#b08000">border-box</span><span style="color:#ca60ca">;</span> 0026 <span style="font-weight:bold">font-variant-alternates</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">styleset(</span>nice-style<span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> 0027 } 0028 0029 <span style="color:#898887">/* Selectors */</span> 0030 0031 body<span style="color:#ca60ca">,</span> blockquote { 0032 <span style="font-weight:bold">margin</span><span style="color:#924c9d">:</span> <span style="color:#b08000">0</span><span style="color:#ca60ca">;</span> 0033 } 0034 0035 header <span style="color:#006e28;font-weight:bold">#logo</span> { 0036 <span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">100</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> 0037 } 0038 0039 div<span style="color:#006e28;font-weight:bold">#footer</span> <span style="color:#644a9b">.link</span> { 0040 <span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">blue</span><span style="color:#ca60ca">;</span> 0041 } 0042 0043 <span style="color:#644a9b">.something</span> 0044 { 0045 <span style="font-weight:bold">margin-right</span><span style="color:#924c9d">:</span> <span style="color:#b08000">0</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> 0046 <span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">#cdd</span><span style="color:#ca60ca">;</span> 0047 <span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">#AAFE04</span><span style="color:#ca60ca">;</span> 0048 <span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">rgb(</span><span style="color:#b08000">10</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">,</span><span style="color:#b08000">30</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">,</span><span style="color:#b08000">43</span><span style="color:#0057ae">%</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> 0049 <span style="font-weight:bold">background</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">maroon</span><span style="color:#ca60ca">;</span> 0050 } 0051 0052 sidebar <span style="color:#006e28;font-weight:bold">#subscribe</span> <span style="color:#644a9b">.subscribe_form</span> input<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">type</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"text"</span><span style="color:#0095ff;font-weight:bold">]</span> { 0053 <span style="font-weight:bold">font-size</span><span style="color:#924c9d">:</span> <span style="color:#b08000">20</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> 0054 } 0055 0056 sidebar <span style="color:#006e28;font-weight:bold">#subscribe</span> <span style="color:#644a9b">.subscribe_form</span><span style="color:#b08000;font-style:italic">:nth-child(</span><span style="color:#b08000">2</span><span style="color:#0057ae">n</span> <span style="color:#ca60ca">+</span> <span style="color:#b08000">1</span><span style="color:#b08000;font-style:italic">):hover</span> input<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">class</span><span style="color:#ca60ca">*=</span><span style="color:#bf0303">"small-"</span><span style="color:#0095ff;font-weight:bold">]</span> { 0057 <span style="font-weight:bold">font-weight</span><span style="color:#924c9d">:</span> <span style="color:#b08000">bold</span><span style="color:#ca60ca">;</span> 0058 } 0059 0060 input<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">value</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">text</span><span style="color:#0095ff;font-weight:bold">]</span> 0061 input<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">value</span><span style="color:#ca60ca">=</span> <span style="color:#bf0303">text </span><span style="color:#0095ff;font-weight:bold">]</span> 0062 input<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">value</span><span style="color:#ca60ca">=</span> <span style="color:#bf0303">text </span><span style="color:#ca60ca">i</span><span style="color:#0095ff;font-weight:bold">]</span> 0063 input<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">value</span><span style="color:#ca60ca">=</span> <span style="color:#bf0303">"text" </span><span style="color:#ca60ca">i</span><span style="color:#0095ff;font-weight:bold">]</span> 0064 input<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">value</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">i</span><span style="color:#0095ff;font-weight:bold">]</span> 0065 input<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">value</span><span style="color:#ca60ca">=</span> <span style="color:#bf0303">i</span><span style="color:#0095ff;font-weight:bold">]</span> { 0066 <span style="font-weight:bold">font-size</span><span style="color:#924c9d">:</span> <span style="color:#b08000">20</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> 0067 } 0068 0069 <span style="color:#006e28;font-weight:bold">#header</span><span style="color:#ca60ca">,</span> 0070 a<span style="color:#b08000;font-style:italic">:hover</span><span style="color:#ca60ca">,</span> 0071 p<span style="color:#644a9b">.intro</span><span style="color:#b08000;font-style:italic">:first-letter</span><span style="color:#ca60ca">,</span> 0072 p<span style="color:#b08000;font-style:italic">:lang(</span><span style="color:#bf0303">nl</span><span style="color:#b08000;font-style:italic">)</span><span style="color:#ca60ca">,</span> 0073 img<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">align</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"right"</span><span style="color:#0095ff;font-weight:bold">]</span> 0074 { 0075 <span style="font-weight:bold">border</span><span style="color:#924c9d">:</span> <span style="color:#b08000">1</span><span style="color:#0057ae">px</span> <span style="color:#b08000">solid</span> Qt::<span style="color:#aa5500">red</span> <span style="color:#0057ae">!important</span><span style="color:#ca60ca">;</span> 0076 <span style="font-weight:bold;font-style:italic">-moz-border-radius</span><span style="color:#924c9d">:</span> <span style="color:#b08000">15</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> <span style="color:#898887">/* unknown properties render italic */</span> 0077 } 0078 0079 <span style="color:#644a9b">.nice-look</span> { 0080 } 0081 0082 ul { 0083 <span style="font-weight:bold">list-style</span><span style="color:#924c9d">:</span> thumbs<span style="color:#ca60ca">;</span> 0084 } 0085 0086 <span style="color:#898887">/* SVG <a> */</span> 0087 svg<span style="color:#ca60ca">|</span>a {} 0088 0089 <span style="color:#898887">/* XHTML and SVG <a> */</span> 0090 <span style="color:#ca60ca">*|</span>a {} 0091 0092 <span style="color:#ca60ca">*</span>{} 0093 <span style="color:#644a9b">.class</span>{} 0094 <span style="color:#006e28;font-weight:bold">#id</span>{} 0095 <span style="color:#b08000;font-style:italic">:hover</span>{} 0096 <span style="color:#b08000;font-style:italic">:lang(</span><span style="color:#bf0303">fr</span><span style="color:#b08000;font-style:italic">)</span>{} 0097 E{} 0098 E F{} 0099 E<span style="color:#ca60ca">></span>F{} 0100 E <span style="color:#ca60ca">></span> F{} 0101 E<span style="color:#ca60ca">~</span>F{} 0102 E <span style="color:#ca60ca">~</span> F{} 0103 E<span style="color:#b08000;font-style:italic">:first-child</span>{} 0104 E<span style="color:#b08000;font-style:italic">:visited</span>{} 0105 E<span style="color:#b08000;font-style:italic">::after</span>{} 0106 E<span style="color:#b08000;font-style:italic">:lang(</span><span style="color:#bf0303">c</span><span style="color:#b08000;font-style:italic">)</span>{} 0107 E<span style="color:#b08000;font-style:italic">:lang(</span><span style="color:#bf0303">fr-ca</span><span style="color:#b08000;font-style:italic">)</span>{} 0108 E <span style="color:#ca60ca">+</span> F{} 0109 E<span style="color:#ca60ca">+</span>F{} 0110 E<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">foo</span><span style="color:#0095ff;font-weight:bold">]</span>{} 0111 E<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">foo</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">warning</span><span style="color:#0095ff;font-weight:bold">]</span>{} 0112 E<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">foo</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"warning"</span><span style="color:#0095ff;font-weight:bold">]</span>{} 0113 E<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">foo</span><span style="color:#ca60ca">~=</span><span style="color:#bf0303">"warning"</span><span style="color:#0095ff;font-weight:bold">]</span>{} 0114 E<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">foo</span><span style="color:#ca60ca">^=</span><span style="color:#bf0303">"warning"</span><span style="color:#0095ff;font-weight:bold">]</span>{} 0115 E<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">foo</span><span style="color:#ca60ca">$=</span><span style="color:#bf0303">"warning"</span><span style="color:#0095ff;font-weight:bold">]</span>{} 0116 E<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">foo</span><span style="color:#ca60ca">*=</span><span style="color:#bf0303">"warning"</span><span style="color:#0095ff;font-weight:bold">]</span>{} 0117 E<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">lang</span><span style="color:#ca60ca">|=</span><span style="color:#bf0303">"en"</span><span style="color:#0095ff;font-weight:bold">]</span>{} 0118 DIV<span style="color:#644a9b">.warning</span>{} 0119 DIV <span style="color:#644a9b">.warning</span>{} 0120 E<span style="color:#006e28;font-weight:bold">#myid</span>{} 0121 E <span style="color:#006e28;font-weight:bold">#myid</span>{} 0122 E<span style="color:#ca60ca">,</span>E{} 0123 E<span style="color:#ca60ca">,</span> E{} 0124 E <span style="color:#ca60ca">,</span>E{} 0125 E <span style="color:#ca60ca">,</span> E{} 0126 0127 p<span style="color:#b08000;font-style:italic">:nth-child(</span><span style="color:#b08000">2</span><span style="color:#b08000;font-style:italic">)</span> { 0128 <span style="font-weight:bold">background</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">red</span><span style="color:#ca60ca">;</span> 0129 } 0130 0131 <span style="color:#898887">/* Elements that are not <div> or <span> elements */</span> 0132 body <span style="color:#b08000;font-style:italic">:not(</span>div<span style="color:#b08000;font-style:italic">):not(</span>span<span style="color:#b08000;font-style:italic">)</span> { 0133 <span style="font-weight:bold">font-weight</span><span style="color:#924c9d">:</span> <span style="color:#b08000">bold</span><span style="color:#ca60ca">;</span> 0134 } 0135 0136 <span style="color:#898887">/* Elements that are not `.crazy` or `.fancy` */</span> 0137 <span style="color:#898887">/* Note that this syntax is not well supported yet. */</span> 0138 body <span style="color:#b08000;font-style:italic">:not(</span><span style="color:#644a9b">.crazy</span><span style="color:#ca60ca">,</span> <span style="color:#644a9b">.fancy</span><span style="color:#b08000;font-style:italic">)</span> { 0139 <span style="font-weight:bold">font-family</span><span style="color:#924c9d">:</span> <span style="color:#b08000">sans-serif</span><span style="color:#ca60ca">;</span> 0140 } 0141 0142 <span style="color:#b08000;font-style:italic">:nth-child(</span><span style="color:#b08000">odd</span><span style="color:#b08000;font-style:italic">)</span> { <span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">lime</span><span style="color:#ca60ca">;</span> } 0143 <span style="color:#b08000;font-style:italic">:nth-child(</span><span style="color:#b08000">even</span><span style="color:#b08000;font-style:italic">)</span> { <span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">lime</span><span style="color:#ca60ca">;</span> } 0144 <span style="color:#b08000;font-style:italic">:nth-child(</span><span style="color:#b08000">4</span><span style="color:#b08000;font-style:italic">)</span> { <span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">lime</span><span style="color:#ca60ca">;</span> } 0145 <span style="color:#b08000;font-style:italic">:nth-child(</span><span style="color:#b08000">4</span><span style="color:#0057ae">n</span><span style="color:#b08000;font-style:italic">)</span> { <span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">lime</span><span style="color:#ca60ca">;</span> } 0146 <span style="color:#b08000;font-style:italic">:nth-child(</span><span style="color:#b08000">3</span><span style="color:#0057ae">n</span><span style="color:#ca60ca">+</span><span style="color:#b08000">4</span><span style="color:#b08000;font-style:italic">)</span> { <span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">lime</span><span style="color:#ca60ca">;</span> } 0147 <span style="color:#b08000;font-style:italic">:nth-child(</span><span style="color:#ca60ca">-</span><span style="color:#0057ae">n</span><span style="color:#ca60ca">+</span><span style="color:#b08000">3</span><span style="color:#b08000;font-style:italic">)</span> { <span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">lime</span><span style="color:#ca60ca">;</span> } 0148 <span style="color:#b08000;font-style:italic">:nth-child(</span><span style="color:#0057ae">n</span><span style="color:#ca60ca">+</span><span style="color:#b08000">8</span><span style="color:#b08000;font-style:italic">):nth-child(</span><span style="color:#ca60ca">-</span><span style="color:#0057ae">n</span><span style="color:#ca60ca">+</span><span style="color:#b08000">15</span><span style="color:#b08000;font-style:italic">)</span> { <span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">lime</span><span style="color:#ca60ca">;</span> } 0149 0150 <span style="color:#644a9b">.first</span> span<span style="color:#b08000;font-style:italic">:nth-child(</span><span style="color:#b08000">2</span><span style="color:#0057ae">n</span><span style="color:#ca60ca">+</span><span style="color:#b08000">1</span><span style="color:#b08000;font-style:italic">)</span><span style="color:#ca60ca">,</span> 0151 <span style="color:#644a9b">.second</span> span<span style="color:#b08000;font-style:italic">:nth-child(</span><span style="color:#b08000">2</span><span style="color:#0057ae">n</span><span style="color:#ca60ca">+</span><span style="color:#b08000">1</span><span style="color:#b08000;font-style:italic">)</span><span style="color:#ca60ca">,</span> 0152 <span style="color:#644a9b">.third</span> span<span style="color:#b08000;font-style:italic">:nth-of-type(</span><span style="color:#b08000">2</span><span style="color:#0057ae">n</span><span style="color:#ca60ca">+</span><span style="color:#b08000">1</span><span style="color:#b08000;font-style:italic">)</span> { 0153 <span style="font-weight:bold">background-color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">lime</span><span style="color:#ca60ca">;</span> 0154 unknown-property<span style="color:#924c9d">:</span> <span style="color:#aa5500">lime</span><span style="color:#ca60ca">;</span> 0155 } 0156 0157 <span style="color:#b08000;font-style:italic">:root</span>{ 0158 <span style="color:#0057ae">--foo</span><span style="color:#924c9d">:</span> if<span style="color:#644a9b">(</span>x > <span style="color:#b08000">5</span><span style="color:#644a9b">)</span> this.width = <span style="color:#b08000">10</span><span style="color:#ca60ca">;</span> <span style="color:#898887">/* valid custom property, invalid in any normal property */</span> 0159 } 0160 0161 <span style="color:#b08000;font-style:italic">:root</span><span style="color:#ca60ca">,</span> 0162 <span style="color:#b08000;font-style:italic">:root:lang(</span><span style="color:#bf0303">en</span><span style="color:#b08000;font-style:italic">)</span> {<span style="color:#0057ae">--external-link</span><span style="color:#924c9d">:</span> <span style="color:#bf0303">"external link"</span><span style="color:#ca60ca">;</span>} 0163 <span style="color:#b08000;font-style:italic">:root:lang(</span><span style="color:#bf0303">de</span><span style="color:#b08000;font-style:italic">)</span> {<span style="color:#0057ae">--external-link</span><span style="color:#924c9d">:</span> <span style="color:#bf0303">"externer Link"</span><span style="color:#ca60ca">;</span>} 0164 0165 a<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">href</span><span style="color:#ca60ca">^=</span><span style="color:#bf0303">"http"</span><span style="color:#0095ff;font-weight:bold">]</span><span style="color:#b08000;font-style:italic">::after</span> {<span style="font-weight:bold">content</span><span style="color:#924c9d">:</span> <span style="color:#bf0303">" ("</span> <span style="color:#644a9b">var(</span><span style="color:#0057ae">--external-link</span><span style="color:#644a9b">)</span> <span style="color:#bf0303">")"</span>} 0166 0167 one { <span style="color:#0057ae">--foo</span><span style="color:#924c9d">:</span> <span style="color:#b08000">10</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> } 0168 two { <span style="color:#0057ae">--bar</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">calc(var(</span><span style="color:#0057ae">--foo</span><span style="color:#644a9b">)</span> <span style="color:#ca60ca">+</span> <span style="color:#b08000">10</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> } 0169 three { <span style="color:#0057ae">--foo</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">calc(var(</span><span style="color:#0057ae">--bar</span><span style="color:#644a9b">)</span> <span style="color:#ca60ca">+</span> <span style="color:#b08000">10</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> } 0170 <span style="color:#644a9b">.foo</span> { 0171 <span style="color:#0057ae">--gap</span><span style="color:#924c9d">:</span> <span style="color:#b08000">20</span><span style="color:#ca60ca">;</span> 0172 <span style="font-weight:bold">margin-top</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">var(</span><span style="color:#0057ae">--gap</span><span style="color:#644a9b">)</span>px<span style="color:#ca60ca">;</span> <span style="color:#898887">/*20 px*/</span> 0173 <span style="font-weight:bold">margin-top</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">calc(var(</span><span style="color:#0057ae">--gap</span><span style="color:#644a9b">)</span> <span style="color:#ca60ca">*</span> <span style="color:#b08000">1</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> <span style="color:#898887">/*20px*/</span> 0174 } 0175 0176 foo { 0177 <span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">calc(</span><span style="color:#b08000">50</span><span style="color:#0057ae">%</span> <span style="color:#b08000">-8</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> <span style="color:#898887">/* invalid */</span> 0178 <span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">calc(</span><span style="color:#b08000">50</span><span style="color:#ca60ca">%-</span> <span style="color:#b08000">8</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> <span style="color:#898887">/* invalid */</span> 0179 <span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">calc(</span><span style="color:#b08000">50</span><span style="color:#0057ae">%</span> <span style="color:#b08000">+8</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> <span style="color:#898887">/* invalid */</span> 0180 <span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">calc(</span><span style="color:#b08000">50</span><span style="color:#ca60ca">%+</span> <span style="color:#b08000">8</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> <span style="color:#898887">/* invalid */</span> 0181 <span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">calc(</span><span style="color:#b08000">2</span><span style="color:#0057ae">px</span> -var<span style="color:#644a9b">(</span>--a<span style="color:#644a9b">))</span><span style="color:#ca60ca">;</span> <span style="color:#898887">/* invalid */</span> 0182 <span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">calc(</span><span style="color:#b08000">50</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">*</span><span style="color:#b08000">-8</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> 0183 <span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">calc(</span><span style="color:#b08000">50</span><span style="color:#0057ae">%</span> <span style="color:#ca60ca">-</span> <span style="color:#b08000">8</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> 0184 <span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">calc(</span><span style="color:#b08000">50</span><span style="color:#0057ae">%</span> <span style="color:#ca60ca">+</span> <span style="color:#b08000">-8</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> 0185 <span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">calc(</span><span style="color:#b08000">50</span><span style="color:#0057ae">%</span> <span style="color:#ca60ca">+</span>(<span style="color:#b08000">8</span><span style="color:#0057ae">px</span>)<span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> 0186 <span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">calc(</span><span style="color:#b08000">2</span><span style="color:#0057ae">px</span> <span style="color:#ca60ca">-</span>(<span style="color:#644a9b">var(</span><span style="color:#0057ae">--a</span><span style="color:#644a9b">)</span>)<span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> 0187 } 0188 0189 sweet-alert input<span style="color:#b08000;font-style:italic">:focus::-moz-placeholder</span> { 0190 <span style="font-weight:bold;font-style:italic">-webkit-transition</span><span style="color:#924c9d">:</span> opacity <span style="color:#b08000">0.3</span><span style="color:#0057ae">s</span> <span style="color:#b08000">0.03</span><span style="color:#0057ae">s</span> <span style="color:#b08000">ease</span><span style="color:#ca60ca">;</span> 0191 <span style="font-weight:bold">transition</span><span style="color:#924c9d">:</span> opacity <span style="color:#b08000">0.3</span><span style="color:#0057ae">s</span> <span style="color:#b08000">0.03</span><span style="color:#0057ae">s</span> <span style="color:#b08000">ease</span><span style="color:#ca60ca">;</span> 0192 <span style="font-weight:bold">opacity</span><span style="color:#924c9d">:</span> <span style="color:#b08000">0.5</span><span style="color:#ca60ca">;</span> 0193 } 0194 0195 0196 <span style="color:#ff5500">@font-feature-values</span> Font One { 0197 <span style="color:#ff5500">@styleset</span> { 0198 nice-style<span style="color:#b08000;font-style:italic">:</span> 12; 0199 } 0200 } 0201 0202 <span style="color:#ff5500">@font-feature-values</span> Font Two { 0203 <span style="color:#ff5500">@styleset</span> { 0204 nice-style<span style="color:#b08000;font-style:italic">:</span> 4; 0205 } 0206 } 0207 0208 <span style="color:#ff5500">@font-palette-values</span> --identifier { 0209 <span style="font-weight:bold">font-family</span><span style="color:#924c9d">:</span> Bixa<span style="color:#ca60ca">;</span> 0210 } 0211 0212 <span style="color:#ff5500">@counter-style</span> thumbs { 0213 <span style="font-weight:bold">system</span><span style="color:#924c9d">:</span> <span style="color:#b08000">cyclic</span><span style="color:#ca60ca">;</span> 0214 <span style="font-weight:bold">symbols</span><span style="color:#924c9d">:</span> <span style="color:#bf0303">"</span><span style="color:#3daee9">\1F44D</span><span style="color:#bf0303">"</span><span style="color:#ca60ca">;</span> 0215 <span style="font-weight:bold">suffix</span><span style="color:#924c9d">:</span> <span style="color:#bf0303">" "</span><span style="color:#ca60ca">;</span> 0216 } 0217 0218 <span style="color:#ff5500">@font-face</span> { 0219 <span style="font-weight:bold">font-family</span><span style="color:#924c9d">:</span> <span style="color:#bf0303">"Open Sans"</span><span style="color:#ca60ca">;</span> 0220 <span style="color:#898887">/* comments */</span> 0221 unknown<span style="color:#924c9d">:</span> <span style="color:#b08000">2</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> 0222 <span style="font-weight:bold">src</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">url(</span><span style="color:#bf0303">"/fonts/OpenSans-Regular-webfont.woff2"</span><span style="color:#644a9b">)</span> <span style="color:#644a9b">format(</span><span style="color:#bf0303">"woff2"</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">,</span> 0223 <span style="color:#644a9b">url(</span><span style="color:#bf0303">"/fonts/OpenSans-Regular-webfont.woff"</span><span style="color:#644a9b">)</span> <span style="color:#644a9b">format(</span><span style="color:#bf0303">"woff"</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> 0224 } 0225 0226 <span style="color:#ff5500">@page</span> { 0227 <span style="font-weight:bold">margin</span><span style="color:#924c9d">:</span> <span style="color:#b08000">1</span><span style="color:#0057ae">cm</span><span style="color:#ca60ca">;</span> 0228 } 0229 0230 <span style="color:#ff5500">@page</span> <span style="color:#b08000;font-style:italic">:first</span> { 0231 <span style="font-weight:bold">margin</span><span style="color:#924c9d">:</span> <span style="color:#b08000">2</span><span style="color:#0057ae">cm</span><span style="color:#ca60ca">;</span> 0232 <span style="color:#898887">/* comments */</span> 0233 marks<span style="color:#924c9d">:</span> crop cross<span style="color:#ca60ca">;</span> 0234 } 0235 0236 <span style="color:#ff5500">@page</span> <span style="color:#b08000;font-style:italic">:</span>unknown { 0237 <span style="font-weight:bold">margin</span><span style="color:#924c9d">:</span> <span style="color:#b08000">2</span><span style="color:#0057ae">cm</span><span style="color:#ca60ca">;</span> 0238 } 0239 0240 <span style="color:#ff5500">@document</span> <span style="color:#644a9b">url(</span><span style="color:#bf0303">"https://www.example.com/"</span><span style="color:#644a9b">)</span> { 0241 h1 { 0242 <span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">green</span><span style="color:#ca60ca">;</span> 0243 } 0244 } 0245 0246 <span style="color:#ff5500">@charset</span> <span style="color:#bf0303">"UTF-8"</span><span style="color:#ca60ca">;</span> 0247 0248 <span style="color:#ff5500">@import</span> <span style="color:#bf0303">'custom.css'</span><span style="color:#ca60ca">;</span> 0249 <span style="color:#ff5500">@import</span> <span style="color:#bf0303">"common.css"</span> <span style="color:#ca60ca">screen</span><span style="color:#ca60ca">;</span> 0250 <span style="color:#ff5500">@import</span> <span style="color:#644a9b">url(</span><span style="color:#bf0303">"fineprint.css"</span><span style="color:#644a9b">)</span> <span style="color:#ca60ca">print</span><span style="color:#ca60ca">;</span> 0251 <span style="color:#ff5500">@import</span> <span style="color:#644a9b">url(</span><span style="color:#bf0303">fineprint.css</span><span style="color:#644a9b">)</span> <span style="color:#ca60ca">print</span><span style="color:#ca60ca">;</span> 0252 <span style="color:#ff5500">@import</span> <span style="color:#644a9b">url(</span><span style="color:#bf0303">'bluish.css'</span><span style="color:#644a9b">)</span> <span style="color:#ca60ca">speech</span><span style="color:#ca60ca">;</span> 0253 <span style="color:#ff5500">@import</span> <span style="color:#644a9b">url(</span><span style="color:#bf0303">"chrome://communicator/skin/"</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> 0254 <span style="color:#ff5500">@import</span> <span style="color:#644a9b">url(</span><span style="color:#bf0303">'landscape.css'</span><span style="color:#644a9b">)</span> <span style="color:#ca60ca">screen</span> <span style="font-weight:bold">and</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">orientation</span><span style="color:#924c9d">:</span>landscape<span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> 0255 <span style="color:#ff5500">@import</span> <span style="color:#644a9b">url(</span><span style="color:#bf0303">"othersheet.css"</span><span style="color:#644a9b">)</span> <span style="color:#ca60ca">screen</span>, <span style="color:#ca60ca">print</span><span style="color:#ca60ca">;</span> 0256 0257 <span style="color:#ff5500">@namespace</span> <span style="color:#644a9b">url(</span><span style="color:#bf0303">http://www.w3.org/1999/xhtml</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> 0258 <span style="color:#ff5500">@namespace</span> svg <span style="color:#644a9b">url(</span><span style="color:#bf0303">http://www.w3.org/2000/svg</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> 0259 0260 <span style="color:#898887">/* Animation (Keyframes) */</span> 0261 0262 <span style="color:#ff5500">@keyframes</span> important1 { 0263 <span style="color:#b08000">from</span> { <span style="font-weight:bold">margin-top</span><span style="color:#924c9d">:</span> <span style="color:#b08000">50</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> } 0264 <span style="color:#b08000">50%</span> { <span style="font-weight:bold">margin-top</span><span style="color:#924c9d">:</span> <span style="color:#b08000">150</span><span style="color:#0057ae">px</span> <span style="color:#0057ae">!important</span><span style="color:#ca60ca">;</span> } <span style="color:#898887">/* ignored */</span> 0265 <span style="color:#b08000">to</span> { <span style="font-weight:bold">margin-top</span><span style="color:#924c9d">:</span> <span style="color:#b08000">100</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> } 0266 } 0267 0268 <span style="color:#ff5500">@keyframes</span> important2 { 0269 <span style="color:#b08000">from</span> { <span style="font-weight:bold">margin-top</span><span style="color:#924c9d">:</span> <span style="color:#b08000">50</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> 0270 <span style="font-weight:bold">margin-bottom</span><span style="color:#924c9d">:</span> <span style="color:#b08000">100</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> } 0271 <span style="color:#b08000">to</span> { <span style="font-weight:bold">margin-top</span><span style="color:#924c9d">:</span> <span style="color:#b08000">150</span><span style="color:#0057ae">px</span> <span style="color:#0057ae">!important</span><span style="color:#ca60ca">;</span> <span style="color:#898887">/* ignored */</span> 0272 <span style="font-weight:bold">margin-bottom</span><span style="color:#924c9d">:</span> <span style="color:#b08000">50</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> } 0273 } 0274 0275 <span style="color:#ff5500">@keyframes</span> slidein { 0276 <span style="color:#b08000">from</span> { 0277 <span style="font-weight:bold">margin-left</span><span style="color:#924c9d">:</span> <span style="color:#b08000">100</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">;</span> 0278 <span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">300</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">;</span> 0279 } 0280 0281 <span style="color:#b08000">to</span> { 0282 <span style="font-weight:bold">margin-left</span><span style="color:#924c9d">:</span> <span style="color:#b08000">0</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">;</span> 0283 <span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">100</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">;</span> 0284 } 0285 } 0286 0287 <span style="color:#898887">/* Media Queries */</span> 0288 0289 <span style="color:#ff5500">@media</span> <span style="color:#ca60ca">print</span> { 0290 <span style="color:#644a9b">.container</span> { 0291 <span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">100</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">;</span> 0292 } 0293 a<span style="color:#b08000;font-style:italic">:hover</span> { <span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">red</span> } 0294 <span style="color:#898887">/* comments */</span> 0295 a<span style="color:#b08000;font-style:italic">:hover</span> { <span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">red</span> } 0296 0297 <span style="color:#006e28;font-weight:bold">#header</span> 0298 { 0299 <span style="font-weight:bold">display</span><span style="color:#924c9d">:</span> <span style="color:#b08000">none</span><span style="color:#ca60ca">;</span> 0300 } 0301 } 0302 0303 <span style="color:#ff5500">@media</span> <span style="color:#ca60ca">screen</span> <span style="font-weight:bold">and</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">min-width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">768</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span> <span style="font-weight:bold">and</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">max-width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">960</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span> { 0304 <span style="color:#644a9b">.container</span> { 0305 <span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">720</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> 0306 } 0307 } 0308 0309 <span style="color:#ff5500">@media</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">max-width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">600</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span> { 0310 <span style="color:#644a9b">.sidebar</span> { 0311 <span style="font-weight:bold">display</span><span style="color:#924c9d">:</span> <span style="color:#b08000">none</span><span style="color:#ca60ca">;</span> 0312 } 0313 } 0314 0315 <span style="color:#ff5500">@media</span> <span style="color:#ca60ca">print</span> { 0316 } 0317 0318 <span style="color:#ff5500">@media</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">height</span> <span style="color:#ca60ca">></span> <span style="color:#b08000">600</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span> { 0319 body { 0320 <span style="font-weight:bold">line-height</span><span style="color:#924c9d">:</span> <span style="color:#b08000">1.4</span><span style="color:#ca60ca">;</span> 0321 } 0322 } 0323 0324 <span style="color:#ff5500">@media</span> <span style="color:#644a9b">(</span><span style="color:#b08000">400</span><span style="color:#0057ae">px</span> <span style="color:#ca60ca"><=</span> <span style="font-weight:bold">width</span> <span style="color:#ca60ca"><=</span> <span style="color:#b08000">700</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span> { 0325 body { 0326 <span style="font-weight:bold">line-height</span><span style="color:#924c9d">:</span> <span style="color:#b08000">1.4</span><span style="color:#ca60ca">;</span> 0327 } 0328 } 0329 0330 <span style="color:#ff5500">@supports</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">display</span><span style="color:#924c9d">:</span> <span style="color:#b08000">grid</span><span style="color:#644a9b">)</span> { 0331 div { 0332 <span style="font-weight:bold">display</span><span style="color:#924c9d">:</span> <span style="color:#b08000">grid</span><span style="color:#ca60ca">;</span> 0333 } 0334 } 0335 0336 <span style="color:#ff5500">@supports</span> <span style="color:#644a9b">font-tech(</span>color-COLRv1<span style="color:#644a9b">)</span> { 0337 <span style="font-weight:bold">font-family</span><span style="color:#924c9d">:</span> <span style="color:#bf0303">"Bungee Spice"</span><span style="color:#ca60ca">;</span> 0338 } 0339 0340 <span style="color:#ff5500">@supports</span> <span style="font-weight:bold">not</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">not</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">transform-origin</span><span style="color:#924c9d">:</span> <span style="color:#b08000">2</span><span style="color:#0057ae">px</span><span style="color:#644a9b">))</span> { 0341 div {} 0342 } 0343 0344 <span style="color:#ff5500">@supports</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">display</span><span style="color:#924c9d">:</span> <span style="color:#b08000">grid</span><span style="color:#644a9b">)</span> <span style="font-weight:bold">and</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">not</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">display</span><span style="color:#924c9d">:</span> <span style="color:#b08000">inline-grid</span><span style="color:#644a9b">))</span> { 0345 div {} 0346 } 0347 0348 <span style="color:#898887">/*</span> 0349 <span style="color:#898887"> * CSS Syntax Highlight Sample File (Standard)</span> 0350 <span style="color:#898887"> *</span> 0351 <span style="color:#898887"> * This file contains most CSS syntax, CSS3 properties, @media, @font-face and</span> 0352 <span style="color:#898887"> * @keyframes annotations.</span> 0353 <span style="color:#898887"> *</span> 0354 <span style="color:#898887"> * @author Guo Yunhe guoyunhebrave@gmail.com</span> 0355 <span style="color:#898887"> * @date 2016-09-16</span> 0356 <span style="color:#898887"> */</span> 0357 0358 <span style="color:#898887">/*</span> 0359 <span style="color:#898887"> * Block comment</span> 0360 <span style="color:#898887"> *</span> 0361 <span style="color:#898887"> * Alert keywords:</span> 0362 <span style="color:#898887"> * </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold">TODO</span><span style="color:#898887"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold">BUG</span><span style="color:#898887"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold">FIXME</span> 0363 <span style="color:#898887"> */</span> 0364 0365 0366 <span style="color:#898887">/* Region markers */</span> 0367 0368 <span style="color:#0057ae;background-color:#e0e9f8">/*BEGIN Comment */</span> 0369 0370 0371 <span style="color:#0057ae;background-color:#e0e9f8">/*END Comment */</span> 0372 0373 <span style="color:#898887">/*</span> 0374 <span style="color:#898887"> * CSS Syntax Highlight Sample File (Complex)</span> 0375 <span style="color:#898887"> *</span> 0376 <span style="color:#898887"> * This file contains complex CSS syntax that can test unexpected situations.</span> 0377 <span style="color:#898887"> *</span> 0378 <span style="color:#898887"> * @author Guo Yunhe guoyunhebrave@gmail.com</span> 0379 <span style="color:#898887"> * @date 2016-09-16</span> 0380 <span style="color:#898887"> */</span> 0381 0382 0383 <span style="color:#898887">/* Comments with special content */</span> 0384 0385 <span style="color:#898887">/*</span> 0386 <span style="color:#898887"> * .class-selector #id "string" 'comment' // comment {} [] () /* comment</span> 0387 <span style="color:#898887"> * </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold">TODO</span><span style="color:#898887"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold">BUG</span><span style="color:#898887"> DEBUG</span> 0388 <span style="color:#898887"> * body {</span> 0389 <span style="color:#898887"> * margin: 0 !important;</span> 0390 <span style="color:#898887"> * }</span> 0391 <span style="color:#898887"> */</span> 0392 0393 <span style="color:#898887">/* Comments in special positions */</span> 0394 0395 header<span style="color:#898887">/* comment here */</span><span style="color:#644a9b">.active</span> <span style="color:#898887">/* comment here */</span> { 0396 <span style="color:#898887">/* comment here */</span> <span style="font-weight:bold">color</span> <span style="color:#924c9d">:</span> <span style="color:#898887">/* comment here */</span> <span style="color:#aa5500">blue</span><span style="color:#898887">/* comment here */</span><span style="color:#ca60ca">;</span> 0397 <span style="font-weight:bold">font-family</span><span style="color:#924c9d">:</span> Arial <span style="color:#898887">/* comment here */</span><span style="color:#ca60ca">,</span> 0398 <span style="color:#bf0303">"Droid Sans"</span><span style="color:#ca60ca">,</span> <span style="color:#898887">/* comment here */</span> 0399 <span style="color:#b08000">sans-serif</span><span style="color:#898887">/* comment here */</span><span style="color:#ca60ca">;</span> 0400 } 0401 0402 <span style="color:#ff5500">@media</span> <span style="color:#ca60ca">screen</span> <span style="color:#898887">/* comment here */</span> <span style="font-weight:bold">and</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">max-width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">300</span><span style="color:#0057ae">px</span> <span style="color:#898887">/* comment here */</span><span style="color:#644a9b">)</span> <span style="color:#898887">/* comment here */</span> {<span style="color:#898887">/* comment here */</span>} 0403 0404 0405 <span style="color:#898887">/* Strings with special content */</span> 0406 0407 <span style="color:#ff5500">@import</span> <span style="color:#644a9b">url(</span><span style="color:#bf0303">"{} $variable /* comment */"</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> 0408 0409 0410 <span style="color:#898887">/* Without extra breaklines and spaces */</span> 0411 0412 pre<span style="color:#644a9b">.primary</span><span style="color:#b08000;font-style:italic">:hover</span><span style="color:#644a9b">.large</span><span style="color:#b08000;font-style:italic">:nth-child(</span><span style="color:#b08000">2</span><span style="color:#0057ae">n</span><span style="color:#ca60ca">-</span><span style="color:#b08000">1</span><span style="color:#b08000;font-style:italic">)</span>{<span style="font-weight:bold">font-size</span><span style="color:#924c9d">:</span><span style="color:#b08000">17</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span><span style="font-weight:bold">font-family</span><span style="color:#924c9d">:</span><span style="color:#bf0303">"Noto Sans"</span><span style="color:#ca60ca">;</span><span style="font-weight:bold;font-style:italic">-webkit-box-shadow</span><span style="color:#924c9d">:</span><span style="color:#b08000">1</span><span style="color:#0057ae">px</span> <span style="color:#b08000">1</span><span style="color:#0057ae">px</span> <span style="color:#b08000">3</span><span style="color:#0057ae">px</span> <span style="color:#644a9b">rgba(</span><span style="color:#b08000">0</span><span style="color:#ca60ca">,</span><span style="color:#b08000">0</span><span style="color:#ca60ca">,</span><span style="color:#b08000">0</span><span style="color:#ca60ca">,</span><span style="color:#b08000">0.3</span><span style="color:#644a9b">)</span>} 0413 0414 0415 <span style="color:#898887">/* With unnecessary breaklines and spaces */</span> 0416 0417 blockquote <span style="color:#644a9b">.ref</span> 0418 { 0419 <span style="font-weight:bold">flex</span> <span style="color:#924c9d">:</span> <span style="color:#b08000">0</span> <span style="color:#b08000">1</span> <span style="color:#b08000">30</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">;</span> 0420 <span style="font-weight:bold">flex-wrap</span> <span style="color:#924c9d">:</span> <span style="color:#b08000">wrap</span><span style="color:#ca60ca">;</span> 0421 } 0422 0423 <span style="color:#ff5500">@media</span> <span style="color:#ca60ca">screen</span> <span style="font-weight:bold">and</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">orientation</span><span style="color:#924c9d">:</span> landscape<span style="color:#644a9b">)</span> { 0424 <span style="color:#644a9b">.sidebar</span> { 0425 <span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">500</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> } } 0426 0427 0428 <span style="color:#898887">/* Special selectors: HTML5 allows user defined tags */</span> 0429 0430 header { 0431 <span style="font-weight:bold">flex</span> { 0432 <span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">300</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> 0433 } 0434 } 0435 0436 <span style="color:#898887">/* CSS Nesting */</span> 0437 0438 header { 0439 <span style="color:#644a9b">.abc</span> { 0440 <span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">300</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> 0441 } 0442 <span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">300</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> 0443 <span style="color:#ca60ca">&</span> width<span style="color:#b08000;font-style:italic">:hover</span> { 0444 <span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">300</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> 0445 } 0446 <span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">300</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> 0447 } 0448 </pre></body></html>