Fundamentals of CSS by Lynda- Basic selector types

Selectors allow us to tell the browser which elements on the page we want to style.

In some cases, you’re going to want to apply styles broadly, to a number of elements all across your site.

In other situations, you’re going to want to target a smaller number of elements, or even a single element.

Element Selector

Element Selectors are global, meaning, they’re going to affect every element of that type in a styled document.

Unlike HTML, we don’t need the angle brackets around the tag name, just the tag itself. For example, to style paragraphs, you’ll use the ‘p‘, for headings, you’d use an ‘h1‘, for unordered list, you’d use a ‘ul‘.

4

Class Selector

Classes are HTML attributes that can be set on any HTML element. You can name a class anything you want and you can use it on as many elements and as many times on the page as you need.

That makes classes pretty popular when it comes to writing CSS. For example, the browser would look through all the elements on the page and apply styling to any elements with the class attribute of “subheading”.

5.jpeg

ID Selectors

ID Selectors are similar to Class Selectors in that they represent an HTML attribute. They differ from classes in one very important aspect: IDs must be unique to the page. Meaning that if you assign an ID to a page element, no other element on that page may have that specific ID.

In this example, the browser would find the element on the page that has the ID attribute of “sidebar” and then apply the styling.

6.jpeg

Element-Specific Selectors

You can also make Class and ID Selectors element-specific by adding an element to the front of the selector.

This limits the styling to only elements with the specific class or specific ID applied to it. For example, here, styling will only be applied to ‘heading2’s with a class of ‘subheading’, or ‘divs’ with an ID of ‘sidebar’.

7.jpeg

Class and ID Naming Conventions

  • No white spaces or special characters
  • Case sensitive
  • Establish standards for your CSS and be consistent with them

 

Dependent Selectors

Descendent Selectors allow you to target an element based on where it’s found within another element. You simply string the selectors together, separating them with white space. The parent selectors are added first, followed by each successive nested selectors.

Here, the browser would find any span elements inside of paragraph elements which were also inside of div elements.

8

In this first example, the browser would locate any paragraph found within a div tag and then apply the styling.

9.jpeg

In the second one, it would find any span element inside of a paragraph, which is also inside of a div and then apply the styling.

10.jpeg

Grouping Selectors

You can also group selectors together by using commas between the selectors themselves.

This can make writing styles more efficient; by grouping selectors together, that need the same styling. Instead of writing three separate selectors like this:

11

You can simply write one Group Selector like this:

12.jpeg

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s