css selectors featured

CSS Selectors Explained

Share on Facebook0Share on LinkedIn0Tweet about this on Twitter0Share on TumblrShare on Google+0Share on StumbleUpon0

HTML was never intended to contain tags that would define the style of the document, it was always to describe the content of the document. From HTML4 and beyond all the styling can be placed into a separate style document called CSS. To apply the styling to your document you have to understand the DOM (Document Object Model) and choose objects to style, Css Selectors are used to identify specific HTML elements in order to give them the styling they need. Below are all the css selectors.

1. Tag Selector

A tag selector is one which works on html element tags, for example in above markup to select both the anchor elements we will use this css

This will type all the anchor in red color.

2. ID Selector

Id’s are that attribute which can be given to only one element in the complete document, so if you select an ID it will select one element.

This will select only the second paragraph and will turn its background to grey, with a padding of 10px on each side.

2. Class Selector

A class selector select all the elements with the matching class name.

The above css selector will select both the para’s.

4. Stacked Css Selectors

You an apply style to more than one selector at a time by listing them down and seperating by a comma.

5. All Selector

This css selector selects every element in the html document, usually used to reset all the default styles set by browser.

6. Descendent Css Selectors

You can narrow down the selection by choosing children or descendants of other element in the DOM using a space between them.

7. Direct Descendent Selector

If you want to select element one one layer deep of your parent css selector then use a greater than ( > ) symbol between theme, this is called Direct descendent css selectors.

This css will apply only on the outer list items as they are the first child of element with calss first-list.

8. Adjacent Selector

We can select the element that is immediately preceded by the former element by using the adjacent css selectors.

The above css selector will select only the first paragraph as it is adjacent to a ul element.

9. Sibling Selector

Extending adjacent selector the Sibling css selector select all the element that directly follow the parent element. You write it by using a tilde sign ( ~ ) in between the selectors.

In this case all the paragraphs following a ul element will have text color as red, but notice the first paragraph which will not have color red property.

10. Pseudo Css Selectors

Pseudo css selectors allows you to target elements only when they are in specific state, like they are hover, or when focused or when already visited. Use a colon symbol ( : ) between the css selector and state.

The aboce css selector will change the color of all the anchors to red when hovered.

11. nth Child Selector

nth child css selector will let you select an element from a range of elements based on its position in the range.

This will turn the first paragraph in DOM to have text color red.

This will select the last paragrapgh and turn it to red.

You can god beyond and use other selectors like all the even elements or all the odd ones.


Conclusion : You just learned all the css selectors, I will suggest you to try and use them in dummy html document so that you have a better grip on them.

TIP : Use free css validation service by w3c to determine the correctness of your css selectors.

Share on Facebook0Share on LinkedIn0Tweet about this on Twitter0Share on TumblrShare on Google+0Share on StumbleUpon0