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

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,332 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.

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

Mark Wilkowske
Mark Wilkowske
Treehouse Moderator 16,033 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,264 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