Their are ways to manipulate your CSS styling so that your properties will find a certain type of element. For example, say you wanted to apply a property to only the first <td> in a table, or you wanted to have a certain property for when the visitor hovers over one in a specific set of elements. Some other examples is that you only want to target a certain element IF it happens to follow another specified element. You could be targeting only words of a specific language.

To really hone in on certain elements, you can use what is called pattern matching. Below is a chart of how to apply pattern matching. The letters in the left column, X & Y, are simply representative of an HTML element such as h3, img, div,id, class, etc.

If you want to understand the parent, child, sibling, ancestor and descendant relationship visit the CSS Bassic article: CSS Rules: Document Tree

Chart of Pattern Matching for CSS

PatternMeaning
* Matches any element.
X Matches any X element (i.e., an element of type Y).
X Y Matches any X element that is a descendant of an Y element.
X > Y Matches any X element that is a child of an element Y.
X:first-child Matches element X when X is the first child of its parent.
X:link
X:visited
Matches element X if X is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).
X:active
X:hover
X:focus
Matches X during certain user actions.
X:lang(y) Matches element of type X if it is in (human) language Y (the document language specifies how language is determined).
X + Y Matches any Y element immediately preceded by a sibling element X.
X[attr] Matches any X element that contains an attribute of the declared type, such as title, alt, etc. (whatever the value).
X[attr=value] Matches any X element that contains an attribute of the declared type with a value that is exactly equal to the "value" within quotes.
X[attr~=value] Matches any X element that contains an attribute of the declared type with a value that is a list of space-separated values, one of which is exactly equal to "value".
X[attr^=value] Matches any X element that contains an attribute of the delcared type with a value that starts with the value shown
X[lang|="en"] Matches any X element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en".
X.ouvert Language specific. (In HTML, the same as DIV[class~="ouvert"].)
X#thisid Matches any X element with ID equal to "thisid".

Pattern Matching Explanations and Examples:

* Universal Selector

The star symbol of * tells the browser to look for something that matches any element. Generally speaking, this selector is not necessary as the default for CSS is to find all element with that selector anyway. An example would be:

*#bigword

This would find all elements with the id of "bigword"

*.highlight

This would find all elements with the class of "highlight"

X type selector

This will match all element of the type specified. This again is the default for CSS to find all elements with this specification. The following example would look for all elements with the <p> tag:

p { font-family: sans-serif }

X Y Descendant selectors

This will look for all elements of the type Y that are descendants of type X. An example would be all <p> tags that directly follow an <h1> tag:

.happytalk p {color: #990022;}

In this example, this will style all of elements with the tag <p> that are contained within an element with the class of .happytalk. Make note that this looks for descendants, not just children, so even if the <p> tag is buried a few <div> tags in, this rule will still apply.

X > Y Child Selectors

This will look for all elements of the type X that is a CHILD of elements of the type Y

.happytalk p {color: #34349C}

In this example, only the <p> tags that are children of the class .happytalk will have this color. If the <p> tag is contained in a <div> tag within the element with the class of happytalk, it will not be affected.

X:first-child

This will affect only the first sibling within the children in the element with the class of happy-talk.

tr:first-child {background: #ccc;}

This example will find the first row of all tables and give it the background color of #ccc.

X:link and X:visited

This will seek out all elements that are the source anchor of a hyperlink of which the target is not yet visited.

a:link {background: #dddddd}
a:visited {background: #dd00dd}

In this example, all <a> tags with hyperlinks that have not been visited previously by the visitor will have a colored background of color #dddddd. Once the link is clicked on, it is considered visited and will have the background color of #dd00dd.

X:active, X:hover and X:focus

This will target elements that are active, being hovered over or in which the focus is set. :active, :hover and :focus are referred to as psuedo-classes.

:active applies at the moment the element is click on.
:hover applies when the cursor is on top of the element but the visitor has not yet clicked on it
:focus applies to elements like text boxes in forms, it is the box with the blinking cursor

#clickhere:active { background: #00c;}
#clickhere:hover { background: #c00;}
#clickhere:focus { background: #0c0;}

In this example, the element with the id of clickhere will turn blue the moment the visitor click on it, but will turn back in an instant. If the visitor hovers over the element, it will turn red. If the element were a text box in a form and it was the text box with the cursor in it, it will be the green color.

X:lang(y)

Another one of the psuedo-classes is the :lang class. It can be designated within the HTML document by a tag such as <div lang=de>. This tells the browser that the language contained in that div is German. If you wanted to target the elements in German on your web page you could use something like this example:

div:lang(de) {background: #aa7700;}

X + Y

This will match any Y element that is immediately preceded by a sibling of element X.

h3 + h4 {color: #005500;}

In this example all <h4> tags that come immediately after an <h3> tag will have a forest green color.

X[attr]

This will match any element X that contains an attribute of the type shown. For example, if you wanted to target all <img> tags with the attribute of "title" eg <img src="/images/myphoto.jpg" alt="This is my photo" title="This is my photo" />.

img[title] {border: 5px #fff solid}

This example would target all <img> tags that have a title attribute and put a 5px wide white border around them.

X[attr=value]

This will target all elements of type X that have an attribute of the type indicated and with the exact value indicated within the quotations. The value for the attribute does not need to be in quotes.

     div[class=largefont] {background-color: #acddee;}  

This will target all <div> elements that have a class attribute that is equal to "largefont" and apply a background color of #acddee. NOTE: Quotation marks around the value for the attribute are not required.

X[attr~=value]

This will target all elements of type X that have an attribute where a portion of it value is as shown. The value for the attribute does not need to be in quotes.

h3[id~=call] {font-family:Arial, sans-serif;}

This example will target all <h3> tags that have an attribute of id that has a space separated value and set the font to Arial. This would include, for example, <h3 id="call four">, <h3 id="call five">, etc.

X[attr^=value]

This will target all elements of type X that have an attribute where the value begins with what is shown.  The value for the attribute does not need to be in quotes.

p[class~=color] {font-weight: bold;}

This example will target all <p> tags that have an attribute of with a class that begins with color This would include, for example, <p class="color-1">, <p class="color-2"> etc.

X[lang|=en]

This will look for and element of type X with a lang attribute has a hyphen-separated list of values beginning with es.  The value for the attribute does not need to be in quotes.

p[lang|=es] {color: #770000;}

This example would look for <p> tags with a lang= attribute that started with es. An example would be <p lang=es-fr>

X.ouvert

This targets any element of type X with a class of "ouvert" or whatever class is specified.

h3.greenText {color: 006699;}

This would look for any <h3 class="greenText"> tags in the document.

X#thisid

This targets any element of type X that has an id of #thisid or what ever is specified.

h1#topheader {text-decoration: underline;}

In this example, the h1 with an id of #topheader will be underlined.