! selector

Back to the index.

States which element in a combinator selector is the subject of the style.

In a combinator selector such as div > p > span, normally the last element, the span, is the CSS’s subject. The ! can change this to either the div or the p.

Testsheet:

div.one > p > span {	/* a span in a p in a div */
	color: #6374AB;
	font-weight: bold;
}

div.two! > p > span {	/* a div that contains a p that contains a span */
	color: #6374AB;
	font-weight: bold;
}

div.three > p! > span { /* a p that contains a span, in a div */
	color: #6374AB;
	font-weight: bold;
}

Test paragraph in a div with a span.

Here the span should be blue and bold.

Test paragraph in a div with a span.

Here the entire div should be blue and bold.

Test paragraph in a div with a span.

Here the previous paragraph, but not this one, should be blue and bold.