FAQ: Selectors - Attribute

This community-built FAQ covers the “Attribute” exercise from the lesson “Selectors”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Full-Stack Engineer
Front-End Engineer
Back-End Engineer

FAQs on the exercise Attribute

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!
You can also find further discussion and get answers to your questions over in Language Help.

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head to Language Help and Tips and Resources. If you are wanting feedback or inspiration for a project, check out Projects.

Looking for motivation to keep learning? Join our wider discussions in Community

Learn more about how to use this guide.

Found a bug? Report it online, or post in Bug Reporting

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

The exercise shows single quotation marks for the attribute value, but if I replace it with double quotation marks, shouldn’t that also be accepted?

a[href*=“seoul”] {
color: lightpink;
}

Exercise: https://www.codecademy.com/courses/learn-css/lessons/learn-css-selectors/exercises/attribute

4 Likes

Do we have to use single quotation marks in CSS? I have been using them from the past lessons but now it gives me an error if I use them in, for example:

a[href*="seoul"] {
    color: lightpink;
}
3 Likes

I wondered the same thing myself, so I tried with double ("") quotes, and tried it without any quotes, and it still gave the same result of whatever declaration was made. All my testing was done within codecademy, so I don’t know if it will give the same result if I was doing it within my own personal code editor.

1 Like

It seems like there’s an error in this exercise—specifically in the 3rd step (which I’m talking about), but it also goes for the previous steps (1 and 2).
According to the MDN web docs the syntax surrounding this value code in ' is accepted, but not code in ´"´, which isn’t despite MDN using it.
Here’s the code I am talking about (it’s CSS selector part):

a[href*="seoul"] {
  color: lightpink;
}

a[href*="seoul" doesn’t get accepted, instead it throws me an error (Codecademy not the browser):
´Did you use 'seoul' in the attribute selector, and color: lightpink; as the declaration?´
I didn’t because it works in the browser—it shows the proper color of lightpink—, but codecademy doesn’t accept it, despite the fact it probably should.

2 Likes

Copy-paste the entire HTML code and paste it in notepad++ or notepad and save as .HTML file.
Do the same thing with the CSS file and save it as .css

You can keep the file name to anything. Make sure the second link in the header of your HTML file has the same href value as the file name as you have decided to keep for the CSS file.

Then try to open the HTML file in your browser and see if it is working. If you are using the notepad++ you can go to language and select the HTML language and then save your code. Notepad++ works as a code editor in a way.

In the code below the word summer is used as a value

img[src*=‘summer’] {
height: 100px;
}

The href value in the code though is "img src=’/images/seasons/warm/summer.jpg’

Similarly, the instructions, ask us to use the code as below

a[href*=‘florence’] {
color: lightgreen;
}

The URL for this CSS code corresponds to ‘https://www.nationalgeographic.com/travel/destination/florence

So do we just select the last word of the URL?

What is it is not a word or string? What if it is very long?

1 Like

ok I found the answer myself. it depends on the syntax selected

[attr*=value]
Represents elements with an attribute-name of attr whose value contains at least one occurrence of value within the string.

2 Likes

Not for nothing I’ve often had like real persnickety errors thrown back at me when I didn’t add an exclamation point or used more grammatically precise capitalization on strings for different stuff I’ve been learning on here. Of course these kinds of errors took me forever to find because I assumed it was the actual technical bit of coding I had done wrong when it was like oh sorry I didn’t want add a ! … They should accept both conventions esp. if they are used in the Mozilla docs but I’m hoping there’s method to the madness of ’ ’ vs " "

2 Likes

I came here to ask the same thing. I looked it up and on MDN Web Docs they use double quotations: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

So I guess they’re both fine :wink:

2 Likes

Why do we use a[href*=‘target’] instead of a[href=‘target’] ?
What’s the purpose of the asterisk?

1 Like

I believe the asterisk * is an Attribute Selector that selects all the values of a certain type. In this case, it looks for all instances of the selected value, whether it appears in the beginning, middle, or end of a string.

To quote this lesson:

" One way is by using type[attribute*=value] . In short, this code selects an element where the attribute contains an instance of the specified value."

After some reading, I find this Mozilla page explains how attribute selectors (^, $, *) target values in this lesson:

Look at the section called Substring Matching Selectors.

3 Likes

What is a string? I think this is the first time this is mentioned in codecademy but they don’t give a definition… I’ve looked online but am still kinda confused. Would love a simple definition!
It’s in this exercise:

  • The first ruleset looks for an img element with an attribute of src that contains the string 'winter' , and sets the height to 50px .

Hello! I first learned string back in the Codecademy Learn How to Code course.

Strings are just any sequence of characters: letters, spaces, numbers, or symbols. We can imagine a sequence of characters that are strung together like beads in a necklace.

It is important to note that we must surround strings we either single quotes or double quotes, just like how the example is given in the lesson "winter" "summer" "florence".

1 Like

Thanks! i haven’t done that course yet so it’s great that you’ve linked it. I’ll take the course once I’ve gotten more comfortable with CSS and HTML

Hi @ngwolfhare, yes, you’re right. The whole point is that there are “more strict” languages and “loose” languages. HTML is among the “loose” languages. It means that a browser tries to display the page correctly “at all costs”. Therefore, even if there are no quotation marks around the attribute value, the browser is able to render the page correctly. But it is not the best practice how to write clean and readable code, of course :slight_smile:

(I apologize for my incorrect English, it is not my native language.)

Yes! It is permissive!

Debugging HTML - Learn web development | MDN (mozilla.org)

Can someone help provide more clarity on this topic for me please!
So, if this type of attribute selector only affects individual items, then to me it almost seems like a lot of work to be done just to be able to target single items when you can just set the image height inline inside the HTML. Why go through the trouble of trying to target it through my external CSS stylesheet if essentially I’m only targeting single items and if I ever want to change and update the styling I’d have to go through the CSS stylesheet.

Isn’t the benefit of CSS to targetting multiple elements’ styling/design and to make code easier to maintain?

When setting the height and width inline as attributes you can only set them as pixels an absolute value. When you style it with a style sheet (internal or external) you can use relative units so it changes based on the screen size.

Kinda. That’s the main purpose of CSS but not all elements can have height and width attributes, only the video, image, picute (and a few others I belive) can have those attributes.

if i just add class to a link and use it in css as . is it acceptable ??