CODEWITHSUNDEEP
htmlcss
Bobby Battista
Bobby Battista

Reputation: 2075

Best way to use multiple classes and subclasses on the same element in CSS

How can I use three different classes for the same element? Does it matter that two of them share the same parent class? I've got a typeform link that uses some functionality, so it's got a typeform class. But I'd like to also make it .button.white and/or .button.transparent

I'm currently trying things like:

<a class="typeform-share button white button transparent">
<a class="typeform-share" class="button white" class="button transparent>

Update: I misunderstood how classes work in css. Now I've discovered another problem - will create a new question. Thank you all!

Upvotes: 1

Views: 484

Answers (1)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

This syntax of html markup is invalid:

<a class="typeform-share" class="button white" class="button transparent">

You cannot use multiple attributes with same name. If you use the browser will use it the first declared one ie. the above will be:

<a class="typeform-share">

To use multiple classes just use space separated values like in your previous markup. But you don't really need to put the same class multiple times:

<a class="typeform-share button white button transparent">
<!--Remove one of the button class, you don't need to repeat-->

Here's a link for how to work with multiple classes from CSS Tricks which will make your life easier.

Upvotes: 2

Related Questions