Selectors of CSS 2.1

IE8+

(stuff you can actually use today)

Titus Stone

*

Wildcard

[parent] * { rule }

Style any tag within the given parent.

* Example


							h2 * { color: steelblue; }
						

<h2>
  <span>   # apply
    <a>    # apply
  <a>      # apply

~

General Sibling

[parent] selector1 ~ selector2 { rule }

Style selector2 if any sibling matching selector1 is found on the same-level.

~ Example


							div h2 ~ p { margin-top: 10px; }
						

<div>
  <p>	    # not apply
  <h2>      # this element's existance trigger the rule
  <p>	    # apply
  <p>	    # apply
  <div>
    <p>	    # not apply

<div>
  <p>	    # not apply

+

Adjacent Sibling

[parent] selector1 + selector2 { rule }

Style selector2 if it immediately follows selector1 in a same-level sibling relationship

+ Example


						div h2 + p { margin-top: 10px; }
					

<div>
  <p>	    # not apply
  <h2>      # this element's existance trigger the rule
  <p>	    # apply
  <p>	    # not apply
  <div>
    <p>     # not apply

<div>
  <p>	    # not apply

~ / + Notes

  • Any valid selector works (ie. #id + .class)
  • The parent is specified only on first selector.
  • Only matches tags that follow, never before.
  • Selector2 can be scoped to only apply to children of a same-level sibling (upcoming example).
  • Does not count if selector2 happens to also meet selector1 criteria.
  • Can be chained (ie. div ~ p + a)

Real World Use Case

Scenario #1: A right-column is sometimes there and sometimes not.


.main { width: 960px; }
aside ~ .main { width: 550px; }

Real World Use Case

Scenario #2: Alter layout if the page is branded.


.main .brand-details ~ .collection .title { font-weight: bold; }

Read: Whenever the class "branding-details" within the class "main" is on the page, set the font-weight of class "tile" within parent "collection" (which is on the same sibling level as "branding-details") to bold.

Real World Use Case

Scenario #3: This slide show!


h2 + h4 { margin-top: 40px; }

>

Direct Decendant

selector1 > selector2 { rule }

Style selector2 only when it appears as a child directly under selector1.

+ Example


						p > a { font-weight: bold; }
					

<div>
  <p>
    <a>     # apply
  <p>
    <span>
      <a>   # not apply

Real World Use Case

Scenario #1: Setup all first-level tags within a sidebar to always fill 100% width.


aside > * { display: block; width: 100%; }

Real World Use Case

Scenario #2: Create menus where sub-menus look different


ul { list-style-type: none; }
ul > li { display: inline-block; width: 150px; font-weight: bold; }
ul li li { color: #BADA55; }

Advantage: The second-level <li> tags don't need to have their styles all re-written.

:before & :after

Tag-less Elements


selector1:before { rule }
selector1:after { rule }

Create a new DOM element, that appears either before or after, which can be styled independently of selector1.

Live Example

<span class="error">Incorrect Password</span>

.error { color: red; position: relative; }
.error:before { content: 'x'; position: absolute; top: 5px;
	left: -45px; background-color: red; color: #fff;
	border-radius: 20px; height: 40px; width: 40px; }
Incorrect Password

:before / :after Notes

  • The content property is mandatory.
  • Cannot receive user events (click, hover, etc.).
  • Cannot be animated/transitioned in most browsers.
  • Cannot be selected directly in chrome dev tools.
  • Pseudo-tags cannot have pseudo-tags of their own (ie. a:before:before).
  • Difficult to debug.

Real World Use Case

Scenario #1: Required indicator for <form>


input.required:before { content: '*'; color: red; position: relative;
			left: -10px; }

Side Note: in CSS3 this would simply be input:required:before.

[ ]

Attributes

[attribute] { rule } // Match any tag with the attribute
selector1[attribute] { rule } // Match selector1 with the attribute
[attribute="value"] { rule } // Attribute equals value
[attribute^="value"] { rule } // Attribute starts with value
[attribute*="value"] { rule } // Attribute contains value
[attribute$="value"] { rule } // Attribute ends with value

Real World Use Case

Scenario #1: Improve UX by adding a "opens in a new tab" icon.


a[target="_blank"]:after { content: ""; height: 20px; width: 30px;
	background: transparent url(new-tab.png) no-repeat;
	display: block; margin: auto 5px; }

Real World Use Case

Scenario #2: Javascript-less tool tips.


<span data-title="Some Definition">Deuce Definition</span>
					

*[data-title] { position: relative; cursor: pointer; }
*[data-title]:hover:after { position: absolute;
	content: attr(data-title); display: block; right: -250px;
	width: 200px; top: -25px; background-color: #E9EDB7; }
Deuce Definition

Further Learning: MDN

Mozilla Developer Network

http://developer.mozilla.org