< Return to Video

CSS Selecting by class

  • 0:00 - 0:02
    Let's take a look at our webpage.
  • 0:02 - 0:05
    It has these top headings,
  • 0:05 - 0:08
    it has this paragraph
    describing rabbits,
  • 0:08 - 0:11
    and now it actually has
    multiple paragraphs,
  • 0:11 - 0:13
    with the lyrics to my favorite song
    about rabbits.
  • 0:14 - 0:18
    Last time, we styled
    the first lyrics paragraph using the id.
  • 0:18 - 0:21
    But now that I have
    multiple paragraphs of lyrics,
  • 0:21 - 0:24
    I want them all to have that
    yellow background color.
  • 0:25 - 0:28
    How could we do that
    using what we know so far?
  • 0:28 - 0:30
    The first thing we learned how to do
  • 0:30 - 0:33
    was to select all tags
    of a particular type,
  • 0:33 - 0:35
    like with the `p` selector.
  • 0:35 - 0:39
    But that colored all of the paragraphs,
    not just the paragraphs with lyrics.
  • 0:39 - 0:41
    We need something more specific.
  • 0:42 - 0:45
    Then we learned how to select
    tags with a particular id,
  • 0:45 - 0:48
    like selecting the paragraph with the
    "rabbit-song" id.
  • 0:48 - 0:51
    But that only selected
    the first paragraph.
  • 0:51 - 0:54
    We can't add that id
    to the other paragraphs,
  • 0:54 - 0:58
    because we're not allowed
    to use the same id on multiple tags.
  • 0:58 - 1:00
    If we wanted to select
    the other paragraphs,
  • 1:00 - 1:03
    we'd have to give each of them new IDs
  • 1:03 - 1:06
    (like "song-lyrics2",
    and "song-lyrics3"),
  • 1:06 - 1:07
    beacuse every ID must be unique.
  • 1:07 - 1:10
    And then we'd have to add rules
    for each of them.
  • 1:10 - 1:12
    We could do that.
    But, wow, that is a lot of work!
  • 1:12 - 1:15
    And every time we added
    a new verse to the song,
  • 1:15 - 1:17
    we'd have to remember to add
    another ID to the HTML,
  • 1:17 - 1:19
    and another ID to the CSS rules,
  • 1:19 - 1:23
    and if we added hundreds of verses,
    it would just be exhausting.
  • 1:23 - 1:24
    Well, guess what?
  • 1:24 - 1:27
    There is a better way,
    and it's called "classes".
  • 1:28 - 1:29
    A class is basically:
  • 1:29 - 1:32
    a way of assigning a particular element
    to a group.
  • 1:32 - 1:35
    And you can assign
    as many elements as you want to a group.
  • 1:35 - 1:40
    To add a class, we need to add a
    class attribute, like we did with IDs.
  • 1:40 - 1:45
    First I'll just delete this ID,
    since I'm going to replace it.
  • 1:45 - 1:48
    Now I've got my cursor
    in the start `` tag.
  • 1:48 - 1:52
    I'll add a space, and write:
    class = "
  • 1:53 - 1:55
    Now we need to come up with
    a class name.
  • 1:55 - 1:57
    A nice descriptive one.
  • 1:57 - 1:59
    Let's call it,
    "song-lyrics".
  • 2:00 - 2:01
    I've typed that in there.
  • 2:02 - 2:04
    What other elements should have
    this class name?
  • 2:04 - 2:06
    Well, all the other lyric paragraphs.
  • 2:07 - 2:09
    So we'll just go down the page,
  • 2:09 - 2:13
    and add the attribute to each of
    the paragraph classes.
  • 2:13 - 2:15
    ("song-lyrics")
  • 2:15 - 2:18
    Okay, great.
    Now we're ready to add the CSS rule.
  • 2:18 - 2:21
    So we go back up to our `` tag,
  • 2:21 - 2:25
    and delete
    the id selector that we had before,
  • 2:25 - 2:26
    since we're replacing it.
  • 2:26 - 2:29
    And now we need to come up with
    our class selector.
  • 2:29 - 2:34
    Well, to start a class selector,
    we use a period, a dot.
  • 2:34 - 2:39
    Then we write the class name after it:
    song-lyrics,
  • 2:39 - 2:46
    and then just like always:
    curly-braces, property, colon, value.
  • 2:47 - 2:48
    Ta-da!
  • 2:48 - 2:51
    All of lyrics now have
    yellow backgrounds.
  • 2:51 - 2:55
    What would happen if we
    capitalize the s here?
  • 2:55 - 2:56
    It doesn't work.
  • 2:56 - 2:59
    Because class names
    are also case-sensitive.
  • 2:59 - 3:02
    It matters which letters
    are lowercase and uppercase,
  • 3:02 - 3:04
    just like with IDs.
  • 3:04 - 3:08
    What would happen if we used
    a hash sign instead of a period?
  • 3:09 - 3:10
    It doesn't work.
  • 3:10 - 3:13
    Because then the browser thinks that
    "song-lyrics" is an ID,
  • 3:13 - 3:16
    and when it can't find anything
    in the id attribute of song lyrics,
  • 3:16 - 3:18
    it gives up.
  • 3:18 - 3:25
    What would happen if we
    put spaces in our class names?
  • 3:25 - 3:27
    Well, that doesn't work either,
  • 3:27 - 3:30
    because classes can't have whitespace.
  • 3:30 - 3:32
    And as we'll find out later,
  • 3:32 - 3:35
    a space means
    something very specific in CSS land.
  • 3:36 - 3:39
    So, we'll just fix this back.
  • 3:40 - 3:41
    So, one more time:
  • 3:41 - 3:43
    When we want to add a class,
  • 3:43 - 3:46
    we come up with a class name,
  • 3:46 - 3:49
    and we add it to our class attribute
    in the HTML.
  • 3:49 - 3:51
    Then we write a style rule,
  • 3:51 - 3:55
    starting with a period
    and then the class name.
  • 3:55 - 3:58
    And now your CSS
    can be classy!
Title:
CSS Selecting by class
Video Language:
English
Duration:
04:00

English subtitles

Revisions