CSS 3: Intermediate

Introduction to Intermediate CSS

Now that you know the Fundamentals, Text, Boxes, Images and Backgrounds of CSS, we can learn some intermediate concepts.

In this section, we'll learn a few more selectors including pseudoclasses and attribute selectors, then finish off by discussing how to account for browser differences.

Pseudo Elements and Classes

Pseudo elements are used to target elements using characteristics other than their name, attributes or content. These properties lie outside the document tree, which is tree that defines the structure of HTML on a webpage.

Selecting the first letter

To specify pseudo-elements, we use a colon after the selector. dynamically based on user interaction or user's state.

To select the first text letter inside a box, we use first-letter. And for the first line, we use first-line.

p.intro::first-letter {
  color: red;
}

Hello my name is Bob!

Selecting the first child

We can also select elements that are the first-child of a container.

ol li:first-child {
  color: purple;
  font-style: italic;
  font-weight: bold;
}

This code will select the first-child list items from an ordered list.

item1
item2
item3

And more!

There are far more pseudo-elements that allow you to target specific elements within a parent container.

:first-child: Selects the first child of a parent element.
:last-child: Selects the last child of a parent element
:first-of-type: Selects the first element of a certain type.
:last-of-type: Selects the last element of a certain type.
:not(selector): Selects every element that is not a specific selector element
:nth-child(n): Selects the nth child of an element
:nth-last-child(n): Selects the nth child, counting backwards, of an element
:nth-last-of-type(n): Selects the nth last element
:nth-of-type(n): Selects the nth element of a selector type
:only-of-type: selects every element that is the only element of its parent
:only-child: Selects every element that is the only child of its parent

Before and After Pseudo Elements

Not only can we select within our content, but we may also select and add content that come before and after an element.

The following code will wrap opening and closing quotes around classes of type spanish.

.spanish::before {
  content: "\a1";
}
blockquote::after {
  content: "!";
}

This is a blockquote sample.

Dynamic Pseudoclasses

The pseudoclasses that we saw in the previous lesson are useful when we want to target specific items that are relative to a containing object.

If we want to target the elements that appear when a user interacts with them, we can use dynamic pseudoclasses.

Link Pseudoclasses

Dynamic pseudoclasses are especially helpful when styling links.

:link: Link elements with an href attribute.
:visited: All links that have been visited.
:active: When a link be being activated, or when the user clicks a link. One the user lets go of the click, the link is not active anymore.
:hover: When then user mouses over a link.
:focus: When teh focus is set on an element. Users can use the TAB key to focus onto the next element.

The following code will turn a link blue when unvisited, its hover state to yellow, and green when visited.

a:link {
  color: blue;
}
  
a:hover {
  color: yellow;
}
  
a:visited {
  color: green;
}

Hello World!

Attribute Selectors

We can select elements based on their attributes, giving us a more power and flexiblity. Oftentimes this means that elements won't necessarily have to have an id or class. This is particularly useful to target an input type or a submit button.

Attribute Existence [ ]

To check whether an attribute exists, we can use the existence symbol. Simply use square brackets []:

abbr[title] {
  border: black solid 1px;
}

If an <abbr> tag has a title attribute, it will be given a border.

Attribute Equality [=]

We can also check to see if the attribute a specific value.

input[type="text"] {
  color: red;
}

This will select all <input> elements whose type attribute is set to text.

From a Group of Attribute Values [~=]

This matches a specific attribute whose value appears in a space-separated list of words.

img[alt~="pony"] {
  color: red;
}

This would choose all img elements that have an alt attribute with the word pony.

See the substring selector below if you don't want to be restricted to space-separated words.

Starts with Selector [^=]

We may also choose an attribute based on the prefix of its value, with the [^=] symbol. For example, this can be useful for differentiating between external and internal links.

[href^="http://"] { 
  color: red;
}

This would choose all outbound links from your website and color the text red.

Ends with Selector [$=]

Now to choose an attribute based on the suffix (end), we use [$=].

[href$=".pdf"] {
  color: blue;
}

This would select all PDF files and color them blue.

Selecting Attributes matching a Substring [*=]

To select attributes based on a substring, we use [*=].

Unlike the group attribute value selector, this phrase does not have to be space-separated.

img[title*="f"]{
  color: green;
}

As long as the img tag as the letter "f" in its title attribute, we color it green.

Multiple Attribute Selectors

We can also select multiple attributes at the same time by just placing them after another.

a[href^="http://"][href*="helloWorld"] {
  color: purple;
}

This will select all outbound anchor elements with helloWorld somewhere in its link.

Vendor Prefixes

When certain CSS selectors, properties or features are still under review and subject to change, we must prefix their declarations with the browser prefix.

Mozilla Firefox: -moz-property
Google Chrome: -ms-property
Internet Explorer: -webkit

To check to see if you need to write a vendor prefix, go to CanIUse.com