IT 4 BLONDES

Beautiful women doing geeky stuff

css selectors and rules - summary

Related Posts

14/08/2012 Categories: CSS

So now for a change I am struggling with CSS... Not easy...

It looks like in case of CSS its all about Selectors and Rules, so I decided to post here a little cram session that me and my "good but short" memory are using... constantly... enjoy... 

Selectors: 
1.Tag selector called also Element selector (no . infront):

body {} - Select the body element.
div {} - Select all div elements.
h1 {} - Select all h1 elements.
div h2 {} - Select all h2 elements that are within a div.
p { border:solid pink; } means select all p (paragraph html element) and the rule says put a border on it.

TextBoxes:
input[type="text"] { border:solid pink; } means select all inputs with the type attribute equal to text.

Elements nested inside other elements:
div div input[type=text] { border:solid pink; } means select all inputs with type = text and which live at least 2 levels deep within nested div elements

2. ID Selectors #infront):
Apply only to a unique element.
<div id="MyIdDiv">
</div>

#MyIdDiv {border:solid pink;}

Advise I got concerning ID selectors: don't use it. So I don't I am just mentioning them to have a complete overview.

3. Class selectors - my favourite (. infront)
!class names are case sensitives!

<div class="bluemoon">
</div>
.bluemoon {border:solid pink;}

Class selectors and attribute selectors

p[class="bluemoon"] {} = p.bluemoon {}

!You can also apply more than 1 class to the element!
If element has two classes both rules will be applied
<div class="blue moon"
</div>
.blue (border: solid blue;}
.moon (color: pink;}

If you cannot find a class name of what you need you can use the class name of a parent element (div with class="settingrow") to help select i.e. the textbox so you can style it(Survey feature-no class name on textbox).
.settingrow input[type=text] { width:300px;}

If you don't want to this rule to affect other features where textboxes are used inside divs with the settingrow class, you might noticed that there is a div wrapping the survey with class="panelwrapper survey". More specific selector will look like this:
.survey .settingrow input[type=text] { width:300px;}

To style only specific elements having a particular class="foot" specify your selector:
To get only divs with .foot type: div.foot {}
To get only paragraphs: p.foot {}
Only paragraph insde divs with the class foot: div.foot p {}
Only links inside paragraph with the class foot inside divs with the class foot div.foot p.foot a {} (like doll in a doll)
and so on
Descendant selectors
!div a {} will affect all the elements in a div no matter how deep they are nested in other elements inside a div

To add color to every link with a title:
a[title] { color:green; }


Selecting Children

If I want to select only elements that live immediately inside my div and not those contained within other elements:
div > a {}

!NOT SUPPORTED EQUALLY IN DIFFERENT BROWSERS!

1. Selecting Adjacent Sibling Elements

i.e.

h2 + p { margin-top: 2px; }

Select only the p elements that come right after an h2 element.


2. Pseudo Class Selectors
i.e.

:focus {} - Selects any element that has the focus.

:hover {} - Selects any element that the mouse is hovering over.

More familiar examples are pseudo classes used with links:

a:link { color: #6297BC; }
a:visited { color: #6297BC; }
a:hover { color: #72A545; }
a:active { color: #6297BC; }

Applying The Same Rule to More Than One Selector

You can apply the same rule to multiple selectors by separating the selectors with commas like this:

h1, h2, h3 {color: green;}

The rule will be applied to each of the 3 selectors, the first selector selects all h1 elements, the second one selects all h2 elements and so on. They can be complex selectors too:

div.cool ul a, .verycool p a {}