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;
}