FAQ: Selectors - Attribute

I was wondering this very exact thing. After doing a bit of digging, I’ve found that both are valid, although Google’s HTML/CSS Style Guide says that we should use double quotation marks with HTML and single quotation marks with CSS. Hope this helps in case other learners are wondering.

What does * do in, for example,

img[src*='winter'] {
  height: 50px;


As a side note, following Codecademy’s suggestions doesn’t make the page more visually appealing so far. That Comic Sans, element framing, pale and hardly visible hyperlinks (“lightpink”? seriously?)… It’s pretty ugly

An asterisk * is a wildcard, that means select all, in this case the purpose is to select all that matches with the string inside quotation marks.
in most of the programming languages like Python, Java, C# etc. and editing programs like word, excel, it means the same: select all.

I’m new to learning about the Front end coding

When doing this exercise, I saw there is a different way to add type and/or attribute values.
(such as [attr~=value], [attr|=value], [attr^=value],[attr$=value],etc…)

Do I need to remember all of them for now? It looks very confusing to me :rofl:

Once you look up attribute selectors a couple times and give it a good read, it will stick. Give it time. You have the resources at your fingertips. All along the way one wants to explore and build on understanding, and that comes from reading (and experimenting/demonstrating) not memorizing.

thank you so much! :blush:

1 Like