A selector is a pattern that comprises a CSS rule matching a set of elements within an HTML or XML document. The declarations within the block that comes after the selector are directed for all elements that match the specified pattern except when another rule is applied to override them.
It was mentioned in a previous article that a string of one or more simple selectors divided by combinators could comprise selectors. For example, a pseudo-element like :first-line can be incorporated following the last simple selector within the chain.
A simple selector can contain either an element type selector (ie. h1) or the universal selector (*). We could imply, or omit, the universal selector if we consider that it isn’t the sole component of the simple selector.
A simple selector could also be made up of class selectors like .warning as ID selectors, #menu as attribute selectors, and [type=”submit”]; as well as pseudo-classes like :hover. These class selectors would serve as modifiers on a type selector, or the universal selector, and specify the selector’s purpose accordingly ie. “but only if…”
The Universal Selector
The universal selector can go along any element type. We could imply, or omit, the universal selector is there are other components apart from it in the simple selector. The following examples shoe equivalent selector examples:
*.warning {
⋮ declarations
}
.warning {
⋮ declarations
}
Be extra careful in noting that the universal selector should not be confused with the wildcard character. Unlike the latter, the universal selector is not compatible “zero or more elements.” Review the HTML part shown below:
<body>
<div>
<h1>The <em>Universal</em> Selector</h1>
<p>We must emphasize the following:</p>
<ul>
<li>It’s <em>not</em> a wildcard.</li>
<li>It matches elements regardless of <em>type</em>.</li>
</ul>
This is an <em>immediate</em> child of the division.
</div>
</body>
The selector div * em will match the em elements shown below:
• “Universal” in the h1 element (* matches the <h1>)
• “emphasize” in the p element (* matches the <p>)
• “not” in the first li element (* matches the <ul> or the <li>)
• “type” in the second li element (* matches the <ul> or the <li>)
However, note that the <em>immediate</em> element will not match the selector since the mentioned example is an immediate child of the div element. The * will not find anything to match between the <div> and <em>.
Tags: Selector Reference
english
español
Deutsch
français
Italiano
Português
русский
Loading ...
Leave a reply