Declaring Same CSS Class Multiple Time

Declaring same CSS class multiple time

type 1 is actually very common when declaring multiple classes with some share the same attributes and some have their owned unique attributes. type 2 is a bit dirty to maintain while type 3 is similar to type 1.

it is all works, just a matter of coding style and ease of maintenance

How can I apply styles to multiple classes at once?

.abc, .xyz { margin-left: 20px; }

is what you are looking for.

Inserting text content using same class multiple times

First off, there is a problem, multiple HTML elements cannot share the same id attribute, you must switch them for classes, also "//user/trophies/A.png" is probably not a valid directory

HTML:

<div class="trophies">
    <img class="trophyimage" src="../user/trophies/A.png" height="100" width="100">
    <span class="text-content spanner"></span>
</div>
<div class="trophies">
    <img class="trophyimage" src="../user/trophies/B.png" height="100" width="100">
    <span class="text-content spanner"></span>
</div>
<div class="trophies">
    <img class="trophyimage" src="../user/trophies/C.png" height="100" width="100">
    <span class="text-content spanner"></span>
</div>

Now, JavaScript can handle your HTML much better

Javascript:

// Don't forget the dot before the word trophies
const trophies = document.querySelectorAll('.trophies')

trophies.forEach(element => {
    const img = element.querySelector('.trophyimage')
    const src = img.getAttribute('src')
    const span = element.querySelector('.spanner')

    // change for the src to fit your files
    if (src === '../user/trophies/A.png') span.innerText = 'Trophy A'
    else if (src === '../user/trophies/B.png') span.innerText = 'Trophy B'
    else span.innerText = 'Null' // Actually writes the word null, for no text use empty quotes
})

If you need more help, just reply to this answer :)

Repeat class multiple times without repeating code

In order to output your HTML without rewriting it each time, you will need to use one of the following:

• An actual programming language (Such as PHP)
• A framework/library (such as React)
• A preprocessor/templating system (such as Haml or Pug)

Using PHP is simple enough, if you have PHP installed on your webhost (you almost certainly do).

For instance, instead of this:

index.html:

<div class="design design-0">Design</div>
<div class="design design-1">Design</div>
<div class="design design-2">Design</div>
<div class="design design-3">Design</div>

You could have this:

index.php

<?php for( $i = 0; $i < 4; $i++ ){
    echo "<div class='design design-$i'>Design</div>";
} ?>

Or check out this Pug example: https://codepen.io/xhynk/pen/OJPvPMX if you would rather use a preprocessor.

For the CSS though, as @Calvin Nunes said, you can make use of the :nth-of-type() selector or even the Adjacent Sibling Combinator - though these largely make the need for the design-x type classes unnecessary, unless you have other reasons to include them.

Using two CSS classes on one element

If you want two classes on one element, do it this way:

<div class="social first"></div>

Reference it in css like so:

.social.first {}

Example:

https://jsfiddle.net/tybro0103/covbtpaq/

Add two times the same class on one element

It is valid to have multiple duplicate classes for an element. Check out the Moz Developer reference here: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/class

Basically, whatever is calling it will recognize both instances for the same element, but will treat it as one class.

To answer your second question as to a reason for someone to utilize this…I personally can't think of one?

As to your problem above, you are removing the attribute 'class' on your element, then adding it back with class values. For example: <div class="car"> becomes <div>, then it becomes <div class="controller action">

You could just use .removeClass to replace .removeAttr

See here: http://api.jquery.com/removeclass/

Hope that helps? Good Luck!

How can I add multiple time animate css class on click event in js?

You need to remove this class when animation is finished

function myFunction() {    document.getElementById("box").classList.add('animated','bounceIn');  setTimeout(function() {    document.getElementById("box").classList.remove('animated','bounceIn');  }, 100)}

#box{  background: red;  height:60px;  width:60px;  margin-bottom:20px;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css"><div class="container">  <div class="row">    <div id="box"></div>  </div></div><div class="container">  <div class="row"><button class="btn btn-sm btn btn-primary" onclick="myFunction()">click to animate</button>  </div></div>

---

Related Topics