Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS How to Make a Website Styling Web Pages and Navigation Polish the Navigation and Footer

Posted by Daniel Shorts
Daniel Shorts
553 Points

Can someone explain why you had the "." in .social-icon selector instead of just "social-icon"?

I haven't seen this syntax anywhere yet. Or, if I have, I must have forgotten it.

2 Answers

Erik McClintock
Erik McClintock
45,783 Points
Erik McClintock
Erik McClintock
45,783 Points

Daniel,

The three most basic CSS selectors are for classes, IDs, and tag names, using the dot, the pound sign, and just the tag name. The dot (.) is used to signify that you're targeting a class, the pound sign (#) is used to signify that you're targeting an ID, and just the tag name is for when you're targeting, well, just the generic tag.

Examples:

<div class="social-icon"></div>

<span></span>

<p id="social-icon"></p>

<!-- note: this is not a real HTML tag, so this will not do anything for you -->
<social-icon></social-icon>

<span></span>

/* this style would apply to the div with the class "social-icon" */
.social-icon {
    border: 2px solid red;
}

/* this style would apply to the paragraph with the ID "social-icon" */
#social-icon {
    font-weight: bold;
}

/* this is how you would target a tag called "social-icon", but this is not a real HTML tag, so it wouldn't work! */
social-icon {
    /* no point, since this isn't a real HTML tag! */
}

/* this would target ALL spans on your site, unless they had classes/IDs that had more specific styles to override these styles */
span {
    display: block;
}

Hope this helps to clear things up. That's just the syntax that CSS uses!

Erik

Rob Brink
Rob Brink
7,148 Points
Rob Brink
Rob Brink
7,148 Points

the "." in .social-icon is a class selector.

The class selector selects elements with a specific class attribute. It is used when you want to give multiple elements the same attributes.