highlight.css

/**
 * This is a pseudo CSS file to test Kate's CSS syntax highlighting.
 */
/* Properties */
body {
	font-size: 15pt;
	font-family: Verdana, Helvetica, "Bitstream Vera Sans", sans-serif;
	margin-top: 0px;			/* yet another comment */
	margin-bottom: 0px;
	// this is no comment, it's just broken!
	background-color: hsl(0, 0%, calc(95% - 3%));
 font-family: "Droid Sans", Arial, sans-serif;
 font-size: 11pt;
 line-height: 1.5em;
 background: #fff000;
 text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
 box-sizing: border-box;
	font-variant-alternates: styleset(nice-style);
}
/* Selectors */
body, blockquote {
 margin: 0;
}
header #logo {
 width: 100px;
}
div#footer .link {
 color: blue;
}
.something
{
	margin-right: 0px;
	color: #cdd;
	color: #AAFE04;
	color: rgb(10%,30%,43%);
	background: maroon;
}
sidebar #subscribe .subscribe_form input[type="text"] {
 font-size: 20px;
}
sidebar #subscribe .subscribe_form:nth-child(2n + 1):hover input[class*="small-"] {
 font-weight: bold;
}
input[value=text]
input[value= text ]
input[value= text i]
input[value= "text" i]
input[value=i]
input[value= i] {
 font-size: 20px;
}
#header,
a:hover,
p.intro:first-letter,
p:lang(nl),
img[align="right"]
{
	border: 1px solid Qt::red !important;
	-moz-border-radius: 15px; /* unknown properties render italic */
}
.nice-look {
}
ul {
	list-style: thumbs;
}
/* SVG <a> */
svg|a {}
/* XHTML and SVG <a> */
*|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 <div> or <span> 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: "1円F44D";
	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:
 * TODOBUGFIXME
 */
/* 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
 * TODOBUG 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;
}