Basic css class selector and tip

CSS Selector

#firstname
select element with id="firstname"

.myclass
select all elements with class="myclass"

p (or any html element tag)
select all <p> elements

AND (conditions without space, comma or any in between)
.class1.class2  
select all elements having both class1 and class2 class attribute
p.class1

select all p elements with class1 attribute

OR (comma separated conditions)

p, div

select all p and all div elements

descendant (space separated conditions)

div p

select all p element inside a <div> elements, child or grand child

direct child (> separated conditions)

div>p

select all p element whose direct parent is div

immediate sibling after

div+p

select p element that is immediately after a div element

general sibling after

div~p

select p element follows a p element, not necessary immediately

CSS debug tip

Chrome debugger provides few useful tools to work on css style.

1. element context menu:

After opening the chrome debugger, you can click on an html element, than then select "inspect" from the context menu, it will scroll to the selected element in Chrome debugger's Element view. From there, right click on the element, and the context menu will allow you to do many operation from chrome debugger, including: 

1. Edit the html element and attribute

2. Force the element state, such as focus, hover, visited, active

3. Set an auto break point when sub element has any change, or element's attribute has any change.

2. Style view menus

The Chrome debugger's style view has 3 menu items that can simplify the css style related debugging. 

:hov menu can be used to toggle the element state

.cls menu can be used to add or remove classes defined for the element

+ menu can be used to define new styles in a temporary css file file called inspector-stylesheet.css