CSS Selectors

CSS Selectors

CSS Selectors give you the ability to select specific HTML entities to apply styling. This post will give an overview of CSS Selectors.

Type Selectors

Selectors used to style HTML tags are called type or element selectors. These will apply styles to every tag of that type on the page.

 

h2 {
  font-family: "Century Gothic", "Gill Sans", sans-serif;
  color: #000000;
  margin-bottom: 0;
}

Class Selectors

Class selectors select a HTML class. Classes, unlike IDs apply to multiple elements. The elements can be of the same of different type.

  • All class selector names must begin with a period
  • CSS permits only letters, numbers, hyphens, and underscores in class names
  • After the period, the name must start with a letter
  • Class names are case-sensitive
.special {
  color: #FF0000;
  font-family: "Monotype Corsiva"
}

ID Selectors

HTML ID Selectors can only be used for one element on a page. ID selectors are not used with CSS as often as they used to be. Using multiple IDs in descendant selectors can make it difficult to determine specificity and easy to accidentally overwrite other styles.

  #banner {
    background: #cc0000;
    height: 300px;
    width: 720px;
}

Styling Groups of Tags

A group selector selects a group of elements to apply style to.

Constructing Group Selectors

Simply list the selectors you want to target, separated by commas.  The selectors can be of any type in CSS.

h1, h2, h3, h4, h5, h6 {
  color: #F1CD33;
}

h1, p, .copyright, #banner {
  color: #F1CD33;
}

The Universal Selector (Asterisk)

An asterisk (*) selects every single tab on the page.

* {
  font-weight: bold;
}

Styling Tags Within Tags

Descendant selectors allow you to select elements that are descendants of other elements. For example say you want to target a <strong> tag when it is inside of a <h1> tag. The selector below selects a <strong > tag that is a descendant of a <h1> tag.

h1 strong {
  color: red;
}

Descendant selectors can contain more than one tag:

ul li a
body li a
html li a
html body ul li a

It is considered better practice to use shorter descendant selectors.

When creating descendant selectors you aren’t just limited to type selectors. You can build complex descendant selectors combining different types of selectors.

.intro a { color: yellow; }

Creating Modules

Descendant Selectors are often used to format a module of code. That is a collection of HTML that serves a particular function on a page.

The following descendant selectors can be used to style a module (a div with the class of news and a h2 and p element inside).

.news h2 { color: red; }
.news p { color: blue; }

It’s also common to create descendant selectors with multiple class names, giving a class name to the descendant elements.

.contact .name { font-weight: bold; }
.contact .phone { color: blue; }
.contact .address { color: red; }

Note

p.intro

The selector above may look like a descendant selector, but it is actually targeting a paragraph element with the class of intro.

Pseudo-Classes and Pseudo-Elements

Pseudo Classes and Pseudo Elements allow you to select parts of a web page that don’t have tags, but are easy to identify.

Styles for Links

There are four pseudo-classes that let you format links in different states

  • a:link – selects and link that your guest hasn’t visited yet, while the mouse isn’t hovering over it or clicking it
  • a:visited – a link your visitor has clicked before
  • a:hover – lets you change the look of a link as your visitor passes the mouse over it
  • a:active – lets you determine how a link looks as your visitor clicks it

Styling Paragraph Parts

The :first-letter pseudo element targets the first letter of the targeted element.

The :first-line pseudo element targets the first line of the targeted element.

More Pseudo-Classes and Pseudo-Elements

:Focus

:focus applies when the visitor does something to indicate their attention to a web page element – usually by clicking or tabbing into it. The :focus selector can be used to change the background color of a text box after the user clicks in when they are about to type.

:Before

The :before pseudo-element lets you add content preceding an element.

.tip:before {content: "Hot tip!" }

:After

Like the :before selector but after the element.

::Selection

Applies to highlighted text on a browser page.

::selection {
  color: #FFFFFF;
  background-color: #993366;
}

For more information on this pseudo class click here. To see an example of this pseudo class click here. Right click and select view source to view the source.

Attribute Selectors

Attribute selectors allow you to style a tag based on HTML attributes it has.

img[title]

The above selector targets all img tags with a title attribute. These selectors can be used with classes too.

.photo[title]

The above selector selects ever HTML element with class photo and a title attribute.

In addition to selecting elements that have a particular element you can select elements who have an exact value set for that attribute.

a[href="http://cafesoylentgreen.com"] {
  color: green;
  font-weight: bold;
}

The above selector selects every link that points to http://cafesoylentgreen.com. Selecting the value of an attribute is useful when working with forms. The input element has many different attributes such as text, checkbox or radio.

input[type="text"]

The attribute selector also lets you select elements with an attribute value that begins withends with, or contains a certain value.

a[href^="http://"]

The ^= translates to begins with.

a[href$=".pdf"] {
  background: url(doc_icon.png) no-repeat;
  padding-left: 15px;
}

The $= translates to ends with.

img[src*="headshot"]

The *= translates to contains so the above selector selects all images whose src attribute contains the word headshot.

Child Selectors

To target the child of another tag, use the child selector.

body > h1

The above selector selects any <h1> tag that is a child of the <body> tag.

Pseudo Classes

CSS includes pseudo-classes for selecting child elements. To make these easier to understand I created a page that demonstrates their usage. It can be viewed here.

Child Type Selectors

Child Type selectors are similar to child selector pseudo classes, except they apply to a particular type. Like child selectors they can be combined with descendant selectors. Unlike child selectors they target a child of a particular type. To see an example of these selectors click here.

Siblings

A tag that appears immediately after another tag in HTML is called an adjacent sibling. Adjacent sibling selectors can be used to give the first paragraph after each heading a different formatting for paragraphs that follow.

h2 + p

The above selector selects every paragraph that follows each <h2> tag.

The :target Selector

The :target selector allows you to target an element with an id, when that ID is the target of a link.

Consider a link that links to a section of the page with an ID of #contact. When that link is selected the ID appears in the browser and it scrolls down to that section of the page. The id #contact appears in the URL after the file path. The target selector allows you to target the element when it has been targeted by a link (and appears in the URL).

To view an example click here.

The :not() Selector

The :not() selector (aka negation pseudo-class) lets you select something that’s not something else.

p:not(.classy) { color: blue; }

This CSS Selector selects every <p> that does not have the class ‘classy’.

The not selector can also come in handy with attribute selectors. Consider the following CSS Selector

a[href^="http://"]

This selector selects all absolute URLs (ones beginning with http). If you use absolute URLs for links on your own page, the style would apply to those. To make it apply to all absolute links OUTSIDE of your page you could do this

a[href&="http://"]:not([href^="http://mysite.com"])
a[href^="http://"]:not([href*="mysite.com"])

CSS Selectors Conclusion

This concludes the tutorial on CSS Selectors. For more information please view Mozilla CSS Reference.

Published by burnedfaceless

Brian Abbott is studying IT and Music Composition at Georgia Southern University.

Leave a comment

Your email address will not be published. Required fields are marked *