*/
*|a {}
*{}
.class{}
#id{}
:hover{}
:lang(fr){}
E{}
E F{}
E>F{}
E > F{}
E~F{}
E ~ F{}
E:first-child{}
E:visited{}
E::after{}
E:lang(c){}
E:lang(fr-ca){}
E + F{}
E+F{}
E[foo]{}
E[foo=warning]{}
E[foo="warning"]{}
E[foo~="warning"]{}
E[foo^="warning"]{}
E[foo$="warning"]{}
E[foo*="warning"]{}
E[lang|="en"]{}
DIV.warning{}
DIV .warning{}
E#myid{}
E #myid{}
E,E{}
E, E{}
E ,E{}
E , E{}
p:nth-child(2) {
background: red;
}
/* Elements that are not or elements */
body :not(div):not(span) {
font-weight: bold;
}
/* Elements that are not `.crazy` or `.fancy` */
/* Note that this syntax is not well supported yet. */
body :not(.crazy, .fancy) {
font-family: sans-serif;
}
:nth-child(odd) { color: lime; }
:nth-child(even) { color: lime; }
:nth-child(4) { color: lime; }
:nth-child(4n) { color: lime; }
:nth-child(3n+4) { color: lime; }
:nth-child(-n+3) { color: lime; }
:nth-child(n+8):nth-child(-n+15) { color: lime; }
.first span:nth-child(2n+1),
.second span:nth-child(2n+1),
.third span:nth-of-type(2n+1) {
background-color: lime;
unknown-property: lime;
}
:root{
--foo: if(x > 5) this.width = 10; /* valid custom property, invalid in any normal property */
}
:root,
:root:lang(en) {--external-link: "external link";}
:root:lang(de) {--external-link: "externer Link";}
a[href^="http"]::after {content: " (" var(--external-link) ")"}
one { --foo: 10px; }
two { --bar: calc(var(--foo) + 10px); }
three { --foo: calc(var(--bar) + 10px); }
.foo {
--gap: 20;
margin-top: var(--gap)px; /*20 px*/
margin-top: calc(var(--gap) * 1px); /*20px*/
}
foo {
width: calc(50% -8px); /* invalid */
width: calc(50%- 8px); /* invalid */
width: calc(50% +8px); /* invalid */
width: calc(50%+ 8px); /* invalid */
width: calc(2px -var(--a)); /* invalid */
width: calc(50%*-8px);
width: calc(50% - 8px);
width: calc(50% + -8px);
width: calc(50% +(8px));
width: calc(2px -(var(--a)));
}
sweet-alert input:focus::-moz-placeholder {
-webkit-transition: opacity 0.3s 0.03s ease;
transition: opacity 0.3s 0.03s ease;
opacity: 0.5;
}
@font-feature-values Font One {
@styleset {
nice-style: 12;
}
}
@font-feature-values Font Two {
@styleset {
nice-style: 4;
}
}
@font-palette-values --identifier {
font-family: Bixa;
}
@counter-style thumbs {
system: cyclic;
symbols: "\1F44D";
suffix: " ";
}
@font-face {
font-family: "Open Sans";
/* comments */
unknown: 2px;
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
@page {
margin: 1cm;
}
@page :first {
margin: 2cm;
/* comments */
marks: crop cross;
}
@page :unknown {
margin: 2cm;
}
@document url("https://www.example.com/") {
h1 {
color: green;
}
}
@charset "UTF-8";
@import 'custom.css';
@import "common.css" screen;
@import url("fineprint.css") print;
@import url(fineprint.css) print;
@import url('bluish.css') speech;
@import url("chrome://communicator/skin/");
@import url('landscape.css') screen and (orientation:landscape);
@import url("othersheet.css") screen, print;
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);
/* Animation (Keyframes) */
@keyframes important1 {
from { margin-top: 50px; }
50% { margin-top: 150px !important; } /* ignored */
to { margin-top: 100px; }
}
@keyframes important2 {
from { margin-top: 50px;
margin-bottom: 100px; }
to { margin-top: 150px !important; /* ignored */
margin-bottom: 50px; }
}
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
/* Media Queries */
@media print {
.container {
width: 100%;
}
a:hover { color: red }
/* comments */
a:hover { color: red }
#header
{
display: none;
}
}
@media screen and (min-width: 768px) and (max-width: 960px) {
.container {
width: 720px;
}
}
@media (max-width: 600px) {
.sidebar {
display: none;
}
}
@media print {
}
@media (height > 600px) {
body {
line-height: 1.4;
}
}
@media (400px <= width <= 700px) {
body {
line-height: 1.4;
}
}
@supports (display: grid) {
div {
display: grid;
}
}
@supports font-tech(color-COLRv1) {
font-family: "Bungee Spice";
}
@supports not (not (transform-origin: 2px)) {
div {}
}
@supports (display: grid) and (not (display: inline-grid)) {
div {}
}
/*
* CSS Syntax Highlight Sample File (Standard)
*
* This file contains most CSS syntax, CSS3 properties, @media, @font-face and
* @keyframes annotations.
*
* @author Guo Yunhe guoyunhebrave@gmail.com
* @date 2016-09-16
*/
/*
* Block comment
*
* Alert keywords:
* TODO BUG FIXME
*/
/* Region markers */
/*BEGIN Comment */
/*END Comment */
/*
* CSS Syntax Highlight Sample File (Complex)
*
* This file contains complex CSS syntax that can test unexpected situations.
*
* @author Guo Yunhe guoyunhebrave@gmail.com
* @date 2016-09-16
*/
/* Comments with special content */
/*
* .class-selector #id "string" 'comment' // comment {} [] () /* comment
* TODO BUG DEBUG
* body {
* margin: 0 !important;
* }
*/
/* Comments in special positions */
header/* comment here */.active /* comment here */ {
/* comment here */ color : /* comment here */ blue/* comment here */;
font-family: Arial /* comment here */,
"Droid Sans", /* comment here */
sans-serif/* comment here */;
}
@media screen /* comment here */ and (max-width: 300px /* comment here */) /* comment here */ {/* comment here */}
/* Strings with special content */
@import url("{} $variable /* comment */");
/* Without extra breaklines and spaces */
pre.primary:hover.large:nth-child(2n-1){font-size:17px;font-family:"Noto Sans";-webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.3)}
/* With unnecessary breaklines and spaces */
blockquote .ref
{
flex : 0 1 30%;
flex-wrap : wrap;
}
@media screen and (orientation: landscape) {
.sidebar {
width: 500px; } }
/* Special selectors: HTML5 allows user defined tags */
header {
flex {
width: 300px;
}
}
/* CSS Nesting */
header {
.abc {
width: 300px;
}
width: 300px;
& width:hover {
width: 300px;
}
width: 300px;
}