Selectors

1
Selectors

• Smashing Chapter 2

2
Selectors

• Why are they so important?
• Without them we would have no way of assigning
  styles to elements.
• By using selectors we can accomplish a great deal
  of styling with just a few lines of CSS.

3
PSUEDO

• There are two types of pseudo things
• There are psuedo-classes
• A pseudo-class is similar to a class in
• HTML, but its not specified explicitly in the
• markup. Some pseudo-classes are
• dynamictheyre applied as a result of user
• interaction with the document.

4
Psuedo-Classes

• A pseudo-class starts with a colon (). No
  whitespace may appear between a type selector or
  universal selector and the colon, nor can
  whitespace appear after the colon.
• They are better supported by browsers therefore
  more widely used.

5
Examples of Psuedo-Classes

• link An Unvisited link
• visited A visited link
• hover A hovered element
• focus A focused element
• active An active element (such as a link while
  its being clicked)
• first-child An element that is the first child
  of another element
• lang() An element based on the value of its
  lang attribute

6
Examples of psuedo-elements

• first-line
• first-letter
• before
• after

7
Example of using pfirst-child

• lt!DOCTYPE htmlgt
• lthtmlgt
• ltheadgt
• ltstylegt
• pfirst-child
• colorblue
• lt/stylegt
• lt/headgt
• ltbodygt
• ltpgtThis is some text. Typing more information in
  the paragraph may make more sense sometimes.
  Since this is the first paragraph within the body
  element you could say that it is the first
  child.lt/pgt
• ltpgtThis is some text. Hello I came after the
  first paragraph. I am the second paragraph
  therefor you could say I am the second child.lt/pgt
• ltpgtWow! Where do I fit in? I know I am not the
  first child!lt/gt
• ltpgtltbgtNotelt/bgt For first-child to work in IE8
  and earlier, a DOCTYPE must be declared.lt/pgt
• lt/bodygt
• lt/htmlgt

8
What it looks like in the browser

• This is some text. Typing more information in the
• paragraph may make more sense sometimes. Since
• this is the first paragraph within the body
  element
• you could say that it is the first child.
• This is some text. Hello I came after the first
  paragraph. I am the second paragraph therefore
  you could say I am the second child.
• Wow! Where do I fit in? I know I am not the first
  child!
• Note For first-child to work in IE8 and
  earlier, a DOCTYPE must be declared.

9
The selector matches the first ltigt element in all
ltpgt elements

• lt!DOCTYPE htmlgt
• lthtmlgt
• ltheadgt
• ltstylegt
• p gt ifirst-child
• colorblue
• lt/stylegt
• lt/headgt
• ltbodygt
• ltpgtI am a ltigtstronglt/igt man. I am a ltigtstronglt/igt
  man.lt/pgt
• ltpgtI am a ltigtstronglt/igt man. I am a ltigtstronglt/igt
  man.lt/pgt
• ltpgtltbgtNotelt/bgt For first-child to work in IE8
  and earlier, a DOCTYPE must be declared.lt/pgt
• lt/bodygt
• lt/htmlgt

10
What it looks like in the browser

• I am a strong man. I am a strong man.
• I am a strong man. I am a strong man.
• Note For first-child to work in IE8 and
  earlier, a DOCTYPE must be declared.

11
focusmatches any element thats currently in
focus

• lt!DOCTYPE htmlgt
• lthtmlgt
• ltheadgt
• ltstylegt
• inputfocus
• background-coloryellow
• lt/stylegt
• lt/headgt
• ltbodygt
• ltpgtClick inside the text fields to see a yellow
  backgroundlt/pgt
• ltformgt
• First name ltinput type"text" name"firstname"
  /gtltbrgt
• Last name ltinput type"text" name"lastname" /gt
• lt/formgt

12
Using focus

• Click inside the text fields to see a yellow
  background
• First name Last name
• Note For focus to work in IE8, a DOCTYPE must
  be declared.

13
before

• selector inserts content before the content of
  the selected element(s).Use the content property
  to specify the content to insert.
• pbefore content"Read this "

14
lt!DOCTYPE htmlgt lthtmlgt ltheadgt ltstylegt pbefore
content"Read this -" lt/stylegt lt/headgt ltbodygt
ltpgtMy name is Pam Kouris. I am here tonight
teaching at Oakton. lt/pgt ltpgtThe room number is
3601. It is a lab!lt/pgt ltpgtltbgtNotelt/bgt For
before to work in IE8, a DOCTYPE must be
declared.lt/pgt lt/bodygt lt/htmlgt
15
What before looks like in browser

• Read this My name is Pam Kouris . I am here
  tonight teaching at Oakton.
• Read this -The room number is 3601. It is a lab!
• NOTE For before to work in IE8, a DOCTYPE must
  be declared.

16
double colon syntax

• double colon syntax was introduced in CSS2.1
  As of this date, no browser requires that you use
  the double-colons before pseudo-elements. A
  single element works fine.

17
CSS3

• CSS3 adds the pseudo-classes The list can be
  found on page 41 in Smashing text.
• (Most are not widely supported at this time)

18
Targets with Style

• It might be useful to be very specific when
  providing a link to certain information.
• lta hrefhttp//example.com/law.htmlsec2-7lt/agt
• The fragment identifier is sec2.7
• Text used target to provide a visual cue to show
  that you in fact have gone there.

19
Specificity

• Refers to the rules behind why a browser would
  choose one style over another when displaying an
  element.
• Becomes more important the more complicated your
  site gets.
• Is the numeric representation of the
  specificness of a selector.

20
With CSS Specificity, Order Matters

• The order in which styles are read by the browser
  matters
• If there was a case of two styles affecting the
  same selector, the last property to be read would
  be the one that would apply.
• In this example
• p color blue
• pcolor yellow
• All paragraphs would be yellow.

21

• This is true whether the styles are in the same
  style sheet or in a different external style
  sheets. The style that is read last would be the
  one that is applied!
• If you are getting styles from different
  locations, the order of the styles is important.

22
Lets look at a Web page frament

• ...
• ltheadgt
• ltlink href"stylesheet1.css" rel"stylesheet"
  type"text/css" /gt
• ltstyle type"text/css"gt
• _at_import URL ("stylesheet3.css")
• p color blue
• lt/stylegt ltlink href"stylesheet2.css"
  rel"stylesheet" type"text/css" /gt
• lt/headgt
• ltbodygt
• ltp style"color yellow"gtfirst paragraphlt/pgt
• ...

23
So

• The fifth style sheet is the most specific and so
  it would be applied.
• Even though there are other styles in another
  style sheet that would apply, the fifth one would
  be the one the browser would apply.

24
It gets more complicated

• Order is not the only thing that defines how a
  style gets applied.
• The more specific your style is defined the more
  likely it will be applied.

25
Rules of specifity

• Assign specificity to a style
• Count the number of element names in the selector
• Count the number of psuedo-classes and other
  non-ID attributes in the selector and multiply by
  10
• Count the number of ID attributes in the
  selector, and multiply by 100
• Add up all three numbers, this that propertys
  specificity.

26
Importance

• Importance overrides specificity and that is
• !important
• It is a way in CSS to make a rule that you feel
  are most crucial always be applied.
• A rule that has the !important will always be
  applied no matter where the rule appears in the
  CSS document.
• Example If you wanted the paragraph text to
  always be red
• p color red !important
• p color yellow

27
What are Shorthand values

• Shorthand properties let you specify several
  properties by using only one. CSS shorthand makes
  it easier for you to apply style to your markup
  and makes your CSS code more concise.
• Any missing key shorthand properties left off the
  browser will then use the default values.

28

• body   background url("bg.gif")
    background-color fff   background-repeat
  repeat-x  
• Using a shortcut
• body  background url("bg.gif") fff repeat-x
  

29
Lab Tonight

• You will be working in teams
• Team 1 Mike and Laura
• Team 2 Marcel and Rami and Eric
• Team 3 Andrew and Sylvia and Nick