CODEWITHSUNDEEP
javascripthtmlcssclass
Melina Jesser
Melina Jesser

Reputation: 35

Wanting to add a defining element to a class without changing the class name

So this question may sound really strange but I am needing to add a defining element to my line of code so that in the CSS I can target that element when targeting the class as well. My current code is below. So what I am needing to do is add something to the class without changing the class name from "right-button". So say if I wanted to code in CSS I would code "this.right-button {}", my question sis where in this line of code can I insert the "this"? I hope this makes sense....

 <div id="scroll">
     <a href="mensshoes.php" class="right-button"><img   src="images/scrollright.png"/></a>
 </div>

Upvotes: 0

Views: 26

Answers (3)

Jaromanda X
Jaromanda X

Reputation: 1

add another class?

html

 <div id="scroll">
     <a href="mensshoes.php" class="right-button bazinga"><img   src="images/scrollright.png"/></a>
 </div>

css

a.right-button.bazinga {
}

actually, with the simple code shown, in css you target this quite simply

#scroll .right-button {
}

no need to change HTML at all. #scroll is guaranteed to be unique, and if there's only one .right-button within that div, then you've found your target precisely

Upvotes: 1

IMSoP
IMSoP

Reputation: 97688

An element can have as many classes as you want, separated by spaces, so you don't need to change "the class name", just add an extra class:

<div id="scroll">
     <a href="mensshoes.php" class="right-button whatever"><img src="images/scrollright.png"/></a>
</div>

You can then specify a CSS rule for all elements with both classes, like so:

.whatever.right-button { color: red; }

The order doesn't matter:

.right-button.whatever { color: red; }

JS libraries like jQuery, or the native querySelectorAll, use exactly the same syntax as CSS for matching elements. If you are somehow matching the exact text of the class attribute, then you're Doing It Wrong, as that attribute is defined as a space separated list.

Upvotes: 0

Addy
Addy

Reputation: 111

You could add an id and attach the css onto that. <a class="right_button" id="id_name"> #id_name {css_stuff: here;}

The other way may be to just use an inline tag <a class="right_button" style="{css_stuff:here}">.

Edit: Adding another class like the others mentioned is a good method too, but if you're only adding the CSS to that one element, then I think the ID method is the way to go.

Upvotes: 0

Related Questions