Mastering CSS selectors

css

There are many basic things every web developer MUST master early in his career and one of them is definitely: CSS Selectors and you see I said MUST not SHOULD because of the importance of the subject

A css selector is a matching pattern used to select any HTML elements in the page in order to style them or manipulate them using Javascript or any other JS library. As a web developer you will use these selectors a lot when you develop any website or web application, you will use them in your CSS files or in your Javascript code, so that’s why you have to learn an comprehend every and each one of them.

Universal selector

The pattern for this selector is simply a “*”, it will match any HTML element

* {
    margin: 0,
    padding: 0
}

Elements selectors

This selector will match every HTML element that has the same name

h1 {
    font-size: 22pt;
    font-style: italic;
}

You can list all the different HTML elements you want to select in a comma separated string

h1,h2,h3,h4,h5 {
    background-color:yellow;
}

Class selectors

This selector will match any HTML element that has the same class

.main-container {
    width: 950px;
}

You can even indicate the HTML element that you want to select

div.main-container { // select only div elements with main-container class
    width: 950px;
}

ID selectors

This selector will match the first HTML element that has the given ID

#footer {
    width: 150px;
}

You can even indicate the HTML element that you want to select

div#footer { // select only the div element with footer id
    height: 150px;
}

Pseudo-classes selectors

A CSS pseudo-class is a special keyword that can be added to the selector to specify the state of the element that must be selected

a:visited{
    color: #0000ff;
}

this is a list of all pseudo-classes

  • :link
  • :visited
  • :active
  • :hover
  • :focus
  • :first-child
  • :nth-child
  • :nth-last-child
  • :nth-of-type
  • :first-of-type
  • :last-of-type
  • :empty
  • :target
  • :checked
  • :enabled
  • :disabled

Descendants selectors

Sometimes you want to select a given HTML element that reside beneath another one and may be another one …
So you have to list all the elements starting from the first parent to the child in a space separated string

div p span { // select all span elements that reside under a P element and that P tag resides also under a div Tag
    font-weight: bold;
}

Child selectors

I you want to select a HTML element that is a direct child of another you have to use the “>”

ul>li{
    line-height: 100%;
}

Adjacent sibling selectors

Adjacent sibling means HTML elements that are positioned after/before each other and have the same element parent. This selector must have the following syntax: E1 + E2 :

div + p {
    font-family: 'Arial Black', Gadget, sans-serif;
}

Attribute selectors

This is another special CSS selector because it let you select any HTML element based on its attribute

[attr]
a[href]{
    color: red;
}
[attr=value]
a[target=_blank]{
    color: red;
}
[attr~=value]

Select all the specified HTML elements that have the word “value” in their attr attribute

img [title~=preview]{
    border: 1px solid #ff00ff;
}
[attr|=value]

Select all the specified HTML elements that value of their attr starts with or equal the “value”

img [title|=preview]{
    border: 1px solid #ff00ff;
}
[attr^=value]

Select all the specified HTML elements that the value of their attr begins with the word “value”

div [id^=main]{
    line-height: 100%;
}
[attr$=value]

Select all the specified HTML elements that the value of their attr ends with the word “value”

div [id$=footer]{
    margin-top: 2px;
}
[attr*=value]

Select all the specified HTML elements that the value of their attr contains the word “value”

div [class*=sect] {
    padding-right: 2px;
}
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