Monthly Archives: March 2014

HTML/CSS

CSS Selectors

For sure, everyone can select DOM elements using ID, CLASS and type of the element, but not many know about enormous potential of CSS selectors. In this post I’m going to show all major approaches to select DOM elements.
Please keep in mind that not all of them work in the old browsers.

* – select all elements

X –  select element by its type

#X – select element by its ID

.X – select all elements by its CLASS

.X .Y – select ALL children elements with the class .Y based on the parent element with the class .X

X  Y – select ALL children elements with the type Y based on the parent element  X

X > Y  – select  DIRECT CHILDREN elements with the type Y based on the parent element  X

X + Y – select  the ONE neighbor element Y following right after the element  X

X ~ Y – select  ALL  neighbor elements Y following  after the element  X

X[ATTR] – select all elements that have attribute ATTR

X[ATTR = “VALUE”] – select all elements that have attribute ATTR with value is equal to VALUE

X[ATTR ^= “VAL”] – select all elements that have attribute ATTR with value starts with letters VAL

X[ATTR $= “LUE”] – select all elements that have attribute ATTR with value ends with letters LUE

X[ATTR *= “ALU”] – select all elements that have attribute ATTR with value contains letters ALU

X[ATTR ~= “VALUE”] – select all elements that have attribute ATTR with values separated by space  and one of the value is equal to VALUE.

X[ATTR |= “VALUE”] – select all elements that have attribute ATTR with values separated by space  and one of the value is equal to VALUE. read more »