demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Selector syntax

css / selectors

Estimated reading time: 1 minute, 40 seconds

In an embedded or linked style sheet, a selector is the markup you are altering the appearance of. There are several different selection methods, the simplest of which are shown below:

CSS Selector Syntax, CSS Levels 1 and 2
NameExampleUse
Universal or “wildcard” selector
* { margin: 0; }
For selecting every element in a document (or site-wide, if used in a linked style sheet). Commonly used for CSS resets to set all elements to the same default properties.
Single selector
p { color: green; }
To select a single tag.
Grouped selectors
h1, h2, h3 { color: red; }
To have multiple elements share the same style rule(s).
Descendant selector
ul li { font-weight: bold; }
Applies the style declaration that applies only to the last element if it is a descendant of the selector sequence. For the example shown, li elements will be bold, but only if they are in the context of (i.e. descend from) a ul element. (li elements in ordered lists will be unaffected)
Sibling selector
h2 ~ p { font-color: red; }
Selects all matching elements that follow at the level of the leading element
Adjacent selector
h2 + p { font-style: italic; }
Selects the element if it comes immediately after the one before it. In the example shown, the first paragraph immediately after an h2 element will be italicized. Other paragraphs outside of this context will be unaffected.
id selector
ul#nav { background: blue; }
Selects elements that have an id that matches the word following the pound sign. Note that this id must be unique to the page. (The same id can be used on multiple pages, but only once per page).
Class selector
p.special { color: red; }
Selects elements that have a class attribute with a value matching the word following the period in the selector. Classes may be used multiple times on a page, but should not be the majority of content associated with that element.
Attribute value selector
input[type="text"]
Applies only to tags in which an attribute has a particular value.
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.