@charset 'utf-8';

/* selector */
#attribute1 span[title=aa] {
	color: red;
}
#attribute1 span[title~=aa], #attribute2 span[title|=aa] {
	border: 1px solid;
}
#attribute3 input[value=A] {
	color: red;
}
#attribute4 .c1 {
	color: red;
}
#attribute4 li.c1 {
	font-weight: bold;
 }
#attribute4 li.c1.c2 {
	border: 1px solid;
}
/* pseudo-class */
#link-ex :link {
	background-color: yellow;
}
#visited-ex1:visited {
	color: red;
}
#visited-ex2 {
	background-color: white;
}
#visited-ex2:visited {
	background-color: red;
}
#visited-ex3:visited {
	border-color: red;
}
#visited-ex4:visited {
	outline-color: red;
}
#visited-ex5:visited {
	font-weight: bold;
}
#hover-ex a:hover, #hover-ex p:hover {
	background-color: yellow;
}
#focus-ex :focus, #focus-visible-ex :focus-visible {
	background-color: yellow;
}
#target-ex a:target {
	background-color: yellow;
	color: inherit;
	padding: 0;
}
#lang-ex li:lang(en) {
	color: red;
}
#lang-ex li:lang(ja) {
	background-color: yellow;
}
#lang-ex li[lang=zh] {
	font-weight: bold;
}
#first-child-ex li:first-child {
	color: red;
}
#first-child-ex li :first-child{
	background-color: yellow;
}
#first-of-type-ex :first-of-type {
	font-size: x-large;
}
#first-of-type-ex :first-child {
	color: red;
}
#nth-child-ex li:nth-child(2n+1) {
	color: red;
}
#nth-child-ex li:nth-child(even) {
	font-size: x-large;
}
#nth-child-ex li:nth-child(3) {
	font-weight: bold;
}
#nth-child-ex li:nth-child(n+3) {
	background-color: yellow;
}
#nth-child-ex li:nth-child(-n+3) {
	border-left: 5px blue solid;
}
#nth-child-ex2 tr:nth-child(2)>:nth-child(2) {
	background-color: yellow;
}
#nth-of-type-ex :nth-of-type(2) {
	background-color: yellow;
}
#nth-of-type-ex :nth-child(2) {
	color: red;
}
#pseudo-class-checked :checked + label {
	background-color: yellow;
}
#link-hover:hover {
	background-color: yellow;
}
/* pseudo-element */
#pseudo-element:first-line {
	color: red;
}
#pseudo-element:first-letter {
	font-size: 2em;
}
#content-bracket:before {
	content: '(';
}
#content-bracket:after {
	content: ')';
}
#content-string1:before {
	content: 'あいう';
}
#content-string2:before {
	content: '\3042\3044\3046';
}
#content-url-ex:before {
	content: url(/images/sample.png);
}
body {
	counter-reset: counter1;
}
#content-counter-ex div:before {
	counter-increment: counter1;
	content: counter(counter1) '.';
}
#content-title:after {
	content: attr(title);
	color: red;
}
#content-style span:before {
	content: '■';
	color: blue;
	text-decoration: none;
}
#content-style-display span:before {
	content: '■';
	display: inline-block;
}
/* */
#combinators1 span {
	color: red;
}
#combinators2 > span {
	color: red;
}
#combinators3 + span {
	color: red;
}
#combinators4 ~ span {
	color: red;
}
#combinators5 ol li + li + li {
	color: red;
}