How to select <a> elements across multiple divs with similar but different id's?

Do you mean aren't wrong? (And thanks for the answer, I haven't seen that before.)

Hi, thanks for the reply, I'm still very new to javascript so its will be some time before i can code it creating divs where i need them and such. I did earlier try

a[id$="div"] {

color: white;

}

and I had no luck, I just tried your example

a[id*="div"] {
  color: white;
}

and have had no luck also, these divs are embedded in a few previous Divs, not sure if my code is getting in the way.

I might end up going for one of the previous solutions temporarily but i hate the idea of not learning how to be efficient, If you want to take a look at what i have so far http://codepen.io/Keiffy101/pen/aOWJZa. Currently only the S link is populated with more than one entry.

Haha yes Dan Oswalt I did mean aren't and I corrected that in my post. Very different meanings. Thank you for pointing that out.

Keith Greatz the reason why it's not working is that I did not see in your codepen anywhere where you had an anchor with that had the letters "div" in the id. In your first example you referenced adiv, bdiv, cdiv, etc, which the common value here was "div", which is why I used it. In your codepen you just have a,b,c, etc so there is nothing to match. Using that markup, you would have to use one of the other solutions offered here, or change your id markup so you have something consistent to reference to. Something like you originally had where every id at least had "div" in the markup.

Unfortunately, CSS doesn't have support for a regex type selector, but jQuery does. But not you're opening a new can of worms and I wouldn't go down that road for this solution.

Thanks Kevin, that has opened my eyes, so I take it

<div>

is not an element but is just a regular expression used and is just a variable? it would make no difference if i used

<gap>

?

I take from your last comment that there's no way to target (without Jquery or other concepts) what I've been calling the div element? even if it has the Id's "adiv-zdiv".

I ended up going about it in another way suggested for now either way.

Thanks again

Keiffy101

You're welcome, let me see if I can help more.

<div> is a valid HTML element. <gap> is not. You can find a list of all valid and support HTML elements here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element

In the context of your question, and applying styles to an element (div or anchor tag) it didn't matter if the element was a div or an anchor, so to make it a touch easier I just used a basic div element.

If you have ids that are adiv-zdiv, than yes, my original answer works because it'll match the "div" part of the id. In the codepen you posted, it wasn't working because the ids were simply a-z, which becomes very difficult to target with one CSS selector.

I hope that helps.

Hey Kevin, I feel like I'm pushing asking so many questions but as God allows I will.

Awsome I understand that "div" is actually an element defined @ https://developer.mozilla.org/en-US/docs/Web/HTML/Element, I really need to have a good read of this.

• "gap"simply is not. I want to affect a number of anchor elements within a "div" element with the id ending in "div". First was suggested the below which I know now is wrong because it targets an "a" element with the id ending in "div".

a[id*="div"] {
  color: white;
}

This is my created div

<div id="adiv">

So what I need to be able to do, Is target all "a" or anchor elements within all "div" elements that have id's ending with "div".

I hope that makes sense.

Love you long time if you have a solution with CSS alone!

Keiffy101

No problem Keith. I learn by helping solve these types of problems, so there is benefit to me as well. It's why I like the forums; it makes me better too.

Now I think I have a very clear picture what you are trying to select. I was thinking you were wanting to select anchor elements that had the id, instead you what anchor elements nested inside divs with that type of id.

So that would make your selector look like this

div[id$="div"] a {

    //custom CSS styles here

}

Remember the dollar sign means the the div's id must end in "div" for it to match, is what you said you wanted.

I'm sorry I didn't get here faster, now looking back it makes more sense what you were trying to do. Let me know if that helps you.

Here, check this out for proof of concept: http://codepen.io/kevink/pen/VLzJRr

Oh I owe you the world!!!!

I was close i guess as I tried

div a[id$="div"] {
  color: white;
}

This is so exciting for me to get this response!!!

div [id$="div"] a{
  color: white;
}

This has worked!!!! ohhh yea!!!!

In english to me it says - for any div element apply to all id's ending in "div" within the div element choose all "a" elements and add this code {}.

You have solved my issue, it will help me with also another div that has an ID's ending in songs.

I am forever in your debt, I used to do basic HTML about 8 years ago and understood most basic DOS commands when i was 15 in "95", only 2 weeks back into it, Im late to the game, but you sire just made me create a list of people who have been instrumental in my progress! you are the first!

Always in debt to you Keiffy101

You're welcome. Glad to see you're getting back into it. You can pay me back by helping someone else out down the line. Yes, basically that selector says

Select any anchor element, nested inside of a div that has an id attribute where the id attribute ends with 'div'

I'm honored to make the list! Cheers!

Thanks for the tip!

I might just end up going with this as a temp solution, as Kevin wrote below there is an easier way just not sure why its not working.

Thanks I might end up using this if I can't get the "attrib ends with" selector working.