CSS Basics - Advanced CSS Selectors

In my previous articles, I introduced you to basic CSS selectors, class, element and id selectors. You can execute a lot of CSS works with those but they are not the only selectors. There are other selectors that allow you to select elements and style based on more specific rules:

Universal Selectors: These selectors can be used in selecting every element on the page.

Child Selectors: These selectors can be used when you want to select specific elements that are descendants of any specific elements.

Descendant Selectors: These selectors can be used if you want to select particular elements that are descendants of other specific elements. Elements is not just limited to direct children but those which are further down the tree as well.

Adjacent Sibling Selectors: To select those elements that follow other specific elements, these selectors are used.

Pseudo-Classes: These comes in handy when you want to style elements not just based on what the elements are but on more esoteric factors such as the stats of links. i.e. you can style the elements depending on more deeper factors like being hovered over or link already visited.

Pseudo-Elements: These elements allow styling of specific parts of elements. As for instance, the initial letter of that element. These elements also allow inserting of content before or after specific elements.

As you progress, you will be guided through more complicated selectors. Even though you don't know anything by now, you don't have to worry because you will get to know them as you gain more experience in designing and styling web pages. Start off with the three basic selectors and then move on as you gain experience and confidence.

Universal Selectors

These selectors as mentioned above, select every element on a page and apply the styling properties. As for instance, the following rule says that every element on the page will be given a solid 1 pixel black border

* {

  border: 1px solid #000000;

}

Attribute Selectors

These selectors allow selecting elements based on attributes they contain. For example, the following selector shows that you can select every img element with an alt attribute.

img[alt] {

  border: 1px solid #000000;

}

By using the above selector, you will be putting a black border around any image that has an alt attribute.

Selecting attributes becomes more useful if you can select them by attribute value instead of just attribute names as given in the example below:

img[src="alert.gif"] {

  border: 1px solid #000000;

}

Posted in: CSS Basics