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

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

Posted by Himanshu Shukla
Himanshu Shukla
542 Points

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

James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

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 :)

Himanshu Shukla
Himanshu Shukla
542 Points
Himanshu Shukla
Himanshu Shukla
542 Points

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

James Anwyl
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points
James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

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 :)

Himanshu Shukla
Himanshu Shukla
542 Points

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,058 Points
HIDAYATULLAH ARGHANDABI
HIDAYATULLAH ARGHANDABI
21,058 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
6,044 Points
Ivonne Benites
Ivonne Benites
6,044 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.