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

Posted by chazel
chazel
Courses Plus Student 6,961 Points

What kind of CSS selector are these: [include*="form-input-select()"]? Where do I find any reference materials for them?

Upon looking at this Codepen entry and viewing the compiled CSS, I see this as a selector (shown below). I cannot find any reference materials online to an "include" or selection that looks like a function (form-input-select()). Can someone point me in the right direction for reference materials for this?

[include*="form-input-select()"] select {
   ...
}
KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,971 Points

Have you looked up mixins?

https://scotch.io/tutorials/how-to-use-sass-mixins

3 Answers

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

The first selector is an attribute selector. Attribute selectors allow you to select elements based on the attributes the element has, and what value that attribute is set to. In your example it is looking for an attribute called include and specifying that the value should contain the text form-input-select() somewhere within it.

The second selector is just a standard type selector that specifies that you are targeting select elements.

If you look at the HTML for the codepen:

<div include="form-input-select()">
  <select required>
    <!--
      This is how we can do "placeholder" options.
      note: "required" attribute is on the select
    -->
    <option value=""
            hidden
    >Example Placeholder</option>

    <!-- normal options -->
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
  </select>
</div>

You can see that the div element has an include attribute and that it contains the text form-input-select(), it also contains one select element, so that is the element that will be targeted by the CSS rule you have posted.

chazel
chazel
Courses Plus Student 6,961 Points

Thanks, Andren!

Now, what exactly does the HTML attribute "include" do? Where can I find information on its usage? Or is it akin to custom data attributes?

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

It is not actually a valid attribute, due to how lenient modern browsers are it doesn't really matter, but technically speaking that attribute makes the HTML non-compliant. Custom attributes are allowed in HTML5 but they must be prefixed with data- as you seem to already be aware.

There is a comment in the JS file on the codepen that states:

The include="" selecor is just a way of documenting what functions do in scss lib

So I get the feeling that the attribute name and value was chosen to make it more obvious that the form-input-select SCSS mixin would end up being applied to that div. Though only the author of that codepen would know for certain.

Dallin Rodgers
seal-mask
.a{fill-rule:evenodd;}techdegree
Dallin Rodgers
Front End Web Development Techdegree Student 13,885 Points
Dallin Rodgers
.a{fill-rule:evenodd;}techdegree
Dallin Rodgers
Front End Web Development Techdegree Student 13,885 Points

Hello caryhazelwood,

This codepen is using something called SCSS. You can learn more about SCSS in the Web Design track. This track has a course called Sass Basics.

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

The codepen does indeed use SCSS, but that is not what caryhazelwood posted. SCSS is not actually understood by any browser, so before it is handed to the browser it is compiled down into pure CSS. It is a section of that compiled CSS code that he copied. Which means that everything in his example is a normal CSS selector.

chazel
PLUS
chazel
Courses Plus Student 6,961 Points
chazel
chazel
Courses Plus Student 6,961 Points

Thanks again, Andren! This clears it up completely. Much appreciated!