What is a conditional selector?

Conditional selectors allow you to define which elements are selected based on their location within the document. It's similar to using an "if" statement in traditional programming but without an actual condition syntax.

Though they are probably used in most professional pages they are not critical knowledge if you are new to web development. Feel free to come back after finishing the rest of the CSS sections.

Keep in mind that for any of these selectors you can combine the 3 main types of selectors. That means that any selector mentioned below can usually have its place swapped out for a different kind. So if the example shows an "ID" selector then you can probably also use a "Class" or "Element" selector in the same exact way.

Because of that, for the sake of this page of instructions, we'll refer to the selected elements as "target" elements whether or not we are talking about id, class, or type selectors.

Selecting Children

We'll start by looking at how to select the children of particular elements.

Descendant Selector

If you wish to select the target elements that are CHILDREN of a particular element then you want a Descendent selector. This selector is formed by simply placing a space between the parent name and the target element name.

  • It doesn't matter if the target is one, two, or more levels below the parent.
  • It will select as many matched elements as are children of the given parent.


Direct Child Selector

"Direct Child" is another way of selecting the children of a particular target elements. It is made by inserting a ">" symbol between the 1st and 2nd target.

  • It will select child immediately under the given target and stop at that level.
  • It will select as many children of that target that match.


Selecting Parents

Now let's look at selecting elements by parent.

Oh wait, we can't! Unfortunately this is not possible at this time using plain CSS. It's an often asked question and for now it's best to just realize you must use JavaScript if you really need to select a parent.

That said the instances where you would need to select a parent element based on "if" it contains an element of a certain type is fairly rare. Since we can add multiple classes to any given element to label that element it will only be with the most dynamic of dynamic-content sites that you'd need it. Sites which will probably implement JavaScript as it is.

Selecting Siblings

It's also possible to make selections based on how elements are positioned NEXT to one another.

Proceeding Sibling Selector

If you wish to select elements that are next to a target element then it is as simple as adding the "~" or "tilde" sign.

  • It will select all of the 2nd target that share a parent with the 1st target.
  • It will only select elements of the 2nd given type that come AFTER the first given type.


Adjacent Selector

If you wish just wish to select an element DIRECTLY AFTER another then you can select this adjacent element with a simple "+" sign.

  • Unlike the sibling selector this symbol will select only the first instance of the 2nd target after the 1st target.


Pseudo Classes

Pseudo Classes select elements not by name but by another property such as their position in the document.

Sometimes with conditional selectors you will not even need to specify the kind of target you want to select. These are so called "pseudo" classes. With these we can ignore element names and utilize their positions within a parent element.

Pseudo classes are typically defined by a target element, a ":" symbol, and then the pseudo class type.

Child Pseudo Classes

For child elements there are three pseudo classes. These selectors CAN be interrupted if they are not in fact the first or last child under their parent element (that means if there was a "div" sibling after the final "p" below the colors will not change).

  1. first-child
  2. only-child
  3. last-child

Remember that even though these selectors work based on the position under the parent the selector should refer to the CHILD and not the parent.

These selectors are particular good for selecting list items, headers, and footers.



Nth Child & Nth of Type

If you'd prefer to just count off the number of children in an element to make a selection you can use the so called "nth of" selectors. There are several selectors of this type. Let's take a look at the two primary ones.

In this example we use "nth-child" and "nth-of-type" to change all "p" tags.

(The "n" part comes from "n" being a variable for a any user-chosen number.)

  • "nth-child" does not *COUNT* the number of elements it matches. It checks if that target element *MATCHES* the given position. This is why the blue text appears in the first example but not the 2nd. The 1st example has a "div" element in position 2 while the 2nd example has a "p" element in position 2. So only the 2nd example is affected.
  • The style creating green text *does* find a "p" element in both examples, so each have green text at position 3.
  • The "nth-of-type" selector on the other hand is NOT looking at the position, but the actual element, and so "counts" to the given occurence. Since the 2nd example has a "div" element in it the 4th occurence of a "p" element is actually line *5* in the 2nd examples.


You can see the result of this same code in the box below.

Not Selected

Blue Text

Green Text

Red Text

Not Selected

Not Selected

Not Selected

Green Text

Not Selected

Red Text

The "Not" Selector

If you want to select elements that are *not* of a certain type then this is the selector to use.

You may wonder what the use of this particular selector is. It is probably most useful when coupled with another class or id selector instead of a type selector such as ".alpha:not(#beta)".



The "empty" selector

Though you'll probably rarely have a use for it, maybe as a debug tool to mark stray elements, you can actually select elements that are empty.

  • Note that the empty tags must be TOUCHING. Even a single blank space is the same as being not empty.


Text [Pseudo] selectors

It's even possible to select (some) text within HTML elements. This is done in the same fashion as regular pseudo classes, meaning they will use the ":" symbol, and not refer to particular element names or attributes.

The example to the right shows the result instead of the HTML used.

  • As you can see, when using "first-letter", non alphanumeric symbols that appear BEFORE the first letter are also enlarged.
  • Note how the first line affected only affects the first line displayed and NOT the entire first "p" element (there are two, one for each sentence).
  • For whatever reason however there is no ":last-line" or ":first-word". I have no good explanation for why this is. I can only suggest using regular expressions within JavaScript or else using the a "span" element within the HTML itself.


"Devouring Time, blunt thou the lion's paws, And make the earth devour her own sweet brood;

Pluck the keen teeth from the fierce tiger's jaws, And burn the long-lived phoenix in her blood;"

Combining Selectors

Always remember it's perfectly possible to stack most selectors as well! For instance with this first select we are combining basic id and class selectors so that divs of a "delta" class are selected ONLY if they are under an "beta" id which MUST be under "alpha".



In the next style we are selecting ONLY "p" elements that are UNDER divs WITHIN the "delta" id. Because of this the text directly under the "delta" div and the text within the "aside" element are untouched.



Also remember that the asterisk symbol that typically selects *all* elements can be use in conjust with condtional selectors as well. In the following code we want to select all of the children of alpha, but all of the children are of a different type. Instead of using a mix of child, sibling, or parent selectors we can simply use the asterisk to select ALL children of the given parent.



Interactive Selectors

Within this section we have three selectors that are dependent on some action by the user. You will find plenty others when searching the internet but they mostly pertain to editing forms and are so mentioned in that section.

Hover

Hover is simplest of interactive styles. When the user's mouse if within the bounds of an element then the defined style(s) are applied.







Place your mouse over this text...





And then place your mouse over this text.
See the difference?





The "hover" selector is also a great way to show how pseudo selectors can be combined with other conditional selectors. For instance let's look at how we can use it to make "tool tips" for some elements.

Move the mouse on and off the blue square below and see what happens. A yellow box should appear over it.

Tool tip content here.

You can place whatever content you want within the div that is always visible.

The code for this, not including size and color info, can be seen to the right.

Aside from making tool tips you can also show and hide elements this way for comparison pictures, quiz answers, or whatever you can imagine. Just remember you can combine these slectors in MANY different configurations. Combining a "hover" selector with adjecent, child, or even "n" selectors is perfectly possible and can creaet some fun interactions.



Finally, the "hover" selector is also a useful ability for semi-animated menus where buttons appear to change appearance when moused over. See the details for this technique at the bottom of the color / images section.

Target

When someone links to a particular part of your page you can define a style that lets them know the've been sent to that particular part of the page. This is useful for reference pages like dictionaries, encyclopedias, or other reference types.

Keep in mind you can only change styles on your own page, not the styles on other pages.

The curious thing about this selector is that it requires no target element. It only requires the seperator and keyword as shown.



That's actually rather boring code to look at so lets try it out. Chances are you didn't find THIS page via a link with a target so we can use this page itself. An id of "target_sel_section" has been added to the header of this section (where it says "target"). Since we are going to this page and not another we don't need a "www" link and can just use the target attribute in our link.

Go here

When clicked the page should either reload or open up a duplicate page within a new tab. The only difference will be the highlighting of this section's title text.

(You might need to scroll up because of the fixed header.)

Selection

For the most part selection will only be used with "color" and "background-color" so that you can change the font color and the color of the selection box itself. Any other style that chagnes the dimensions or font-family of the selection will not work in most current browsers.



As an interactive selector you won't notice the effect of it immediately. You can try it out using the example text to the right however.

Click and drag your mouse on this text and make note of the color placed around the text.

Now click and drag to select *this* text and note the difference.

Notice the background color? The first sentence should be highlighted in the default blue when selected hile the second should have a yellow highlight.

As said, remember that "color" and "background-color" are the main properties you'll be using with this selector since properties that change dimensions or font-styles won't work with it in most current browsers.

You can also use this to create hidden notes to relay information to your international spy ring.

XXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXX