Please help me understand this none display code

[Myrmeform]

Hello! I am using this sadgrl code snippet here for my various image galleries, example here. (if you look at the page source, please don't mind my army of br's, I am slowly learning lol)
It is doing exactly what I want it to be doing.
My question is, when looking at the sadgrl snippet, it just says

Code

[id]

for the selector. Am I supposed to designate an id for that? What id should I put there?

Thank you for your time!!

[ヤーナム]

You don't need to modify the CSS. It looks like a placeholder but it's actually a selector for any element with an ID attribute. So it will match <div id='5'> but it won't match <div class='5'>.

CSS lets you match on element attributes with square brackets like that, normally you would see it paired with an element. You could do it with any HTML element/attribute, like this:

Code: html

<style>
  a[href='https://melonking.net'] {
    border: 4px dashed green;
  }

  input[type='text'] {
    border: 4px dashed purple;
  }
</style>

<a href='https://melonking.net'>melonking.net will have a dashed green border</a>

<a href='httts://mozilla.org'>mozilla.org won't have any styling</a>

<input type='text' placeholder='text input will have a dashed purple border' />

<input type='button' value="button input won't have styling" />

Are you seeing a problem with your site where it feels like you should modify the CSS?

[Myrmeform]

Ooooh, that makes a lot of sense, thank you so much!!! w3schools didnt say anything about that when I was looking at their selectors page so I wasn't sure what it was doing. But now I think I should be looking at more resources other than w3schools haha.

I'm having no problems, but I was also wondering what I should do if I want to put anything else on the page that also has an id? Thank you for your help!

[ヤーナム]

The best over all resource for web tech is MDN, but it can be intimidating for beginners. I love wandering around the MDN docs and discovering things I didn't know HTML/CSS could do.

If you want other elements on your page to have IDs you should make the selectors for the blog entries to be more specific. You actually don't need the ID attribute in the selector at all, you can just use a class. Choose a class name you want to use for blog entry links:

Code: html

<style>
  .entry {
    display: none;
  }

  .entry:target {
    display: block;
  }
</style>

The cool thing happening here is that the :target pseudo-selector is active when the URL fragment matches an element ID, just like when you have an anchor tag to scroll the user to a point on the page, e.g.

Code: html

<a href='#thing'>go to thing</a>

<div style='height: 500px'>
  ... spacing ...
</div>

<div id='thing'>thing!</div>

When you do this and click on the "go to thing" link, the URL in your address bar will have the #thing fragment added to it. The :target pseudo-selector will match when the ID of an element matches that fragment. Your blog code is being clever and using this feature to hide all blog entries unless the fragment matches. :) It's neat!

[Myrmeform]

The mdn looks like a great resource, thank you!!
I'll try the class selector and making it more specific.

Oh yeah, I understand that part about the code, that's why I wanted to use it, so I wouldn't have to make whole new pages for the different years in my galleries haha.

Thank you so much for all your help!

[ヤーナム]

Happy to help <3 :D