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

JavaScript Treehouse Club - MASH MASH - JavaScript Fill in Answers and Get Answers Functions

Posted by Nathalie Agnekil
Nathalie Agnekil
6,665 Points

What is a CSS selector?

What is a CSS selector? Feel like I've missed four videos in between this and the last one, so much information I don't recognize.. I thought CSS was for style? So what does it have to do with function...?

4 Answers

andren
andren
28,558 Points
andren
andren
28,558 Points

When styling elements in CSS you need two things, a selector which specifies what elements you want to style, and a rule which specifies what style properties you want to change.

While the CSS selector system was developed with CSS in mind, it is essentially just a concise way of describing what elements you want your code to target. Since JavaScript code frequently needs to target specific groups of elements these days it also needs a selector syntax. Instead of reinventing the wheel by creating a new standard JavaScript just adapted the existing CSS selector syntax.

Which means that CSS selectors, despite the name, can be used in both CSS and JavaScript. The first selector shown in this video is an attribute selector which allows you to target elements based on what value an attribute on the element has been set to.

Even if you don't intend to become a web designer and use CSS itself, I would still highly recommend learning the most common and useful CSS selectors. As they make things a lot easier when trying to target elements in JavaScript.

Nathalie Agnekil
Nathalie Agnekil
6,665 Points
Nathalie Agnekil
Nathalie Agnekil
6,665 Points

That doesn't help me. I don't understand why CSS has functions, i thought it was for style.

Mark Wilkowske
Mark Wilkowske
Courses Plus Student 18,131 Points
Mark Wilkowske
Mark Wilkowske
Courses Plus Student 18,131 Points

A selector is a function for the browser to interpret and render on the page.

The first part is the selector and the second part, the curly braces are the rules or instructions for the browser. This is a class selector:

.my-selector {color: orange; font-size: 14px;}

Ok, browser: grab the class selector called my-selector and apply orange color to it and give it a font size of 14px.

Adam Beer
Adam Beer
11,314 Points
Adam Beer
Adam Beer
11,314 Points

Inside the HTML, you can give specific "id" or "class" to elements and tags. After you enter in .css file you can select elements and tags with "id" or "class". For example:

in HTML content

<body>
  <div id="everything">
    //Anything
  </div>
</body>

or

<body>
  <div class="everything">
    //Anything
  </div>
</body>

You have now added a special "id" or "class" *. So enter your css file and select the *"id" or "class".

in CSS content

#everything{ //this is the id selector
  // Inside here you give style to content
}

or

.everything{ //this is the class selector
  // Inside here you give style to content
}

I hope this is helping for you