Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript jQuery Basics Working with jQuery Collections Changing Element Styles and Classes

class not applied

I changed the value of href attribute of the last anchor element such that it starts with a "https://" and ends with ".pdf". On execution only the safe flag appeared after the link but both the safe and locked were supposed to appear. can anyone explain why?

<li><a href='https://developer.mozilla.org/en-US/docs/Glossary/jQuery.pdf'>jQuery Glossary</a></li>

5 Answers

It is only supposed to display one flag at a time.

If you look at the HTML in your browser (I'm using dev tools on Chrome). You can see that both the secure and pdf classes have been applied correctly. However, the secure class is overriding the pdf class.

Screenshot

The secure class overrides the pdf class because a.secure:after appears after a.pdf:after in your css.

a.pdf:after {
  ...
}
a.secure:after{
  ...
}

If you were to switch the rules around, a.pdf:after would override a.secure:after:

a.secure:after{
  ...
}

a.pdf:after {
  ...
}

If you wanted both to appear at the same time, you could use the :before pseudo element. (You can only use 1 :after statement per element). For example:

a.pdf:before{
  ...
}

a.pdf:after {
  ...
}

Hope this helps :)

thankyou!! appreciate your help... :) I think i gotta check the CSS pseudo classes workshop one again ;|

Hi Himanshu,

We need to see what code you've written so far before we can help you.

Can you post your code or create a workspace snapshot so we can take a look.

Hope this helps :)

Html code for link:

<li><a href='https://developer.mozilla.org/en-US/docs/Glossary/jQuery.pdf'>jQuery Glossary</a></li>

css code :

a.pdf:after{
  content: "Locked";
  color: #fff;
  font-size: 10px;
  background-color: #de565b;
  padding: 3px 6px;
  margin-left: 5px;
  border-radius: 3px;
}

a.secure:after{
  content: "Safe";
  color: #fff;
  font-size: 10px;
  background-color: #64ce83;
  padding: 3px 6px;
  margin-left: 5px;
  border-radius: 3px;
}

js code(jQuery) :

const $safeSites = $('a[href ^= "https://"]');
const $pdf = $('a[href $= ".pdf"]');
const checkbox = $(' <label><input type="checkbox"> Allow PDF downloads</label>');
const links = $('a');

$('#links').append(checkbox);

$safeSites.addClass('secure');
$pdf.addClass('pdf');
$pdf.attr('download',true);

links.each(
    (index , link) => {
        const url = $(link).attr('href');
        $(link).parent().append(`(${url})`);
    }
);

$pdf.on(
    'click',
    (event) => {
        if($(':checked').length !== 1){
            event.preventDefault();
            alert('Make sure the box to allow downloads is checked!');
        }
    }
);
HIDAYATULLAH ARGHANDABI
HIDAYATULLAH ARGHANDABI
21,017 Points

Dear Friends, Please make the secure links part equal to https because secure links are with https protocols. the code will work

const $secureLinks= $('a[href^="https://"]');
Ivonne Benites
Ivonne Benites
5,289 Points

Hello, I am having some issues using the addClass method, I wanted that locked tag appears, I used the before and after method, but it seems that the secure class and the locked class appears both in the link of pdf. Can anyone please help me to solve it? thank you in advance.