CODEWITHSUNDEEP
htmlcss
Badal Singh
Badal Singh

Reputation: 479

How to apply style to inline elements without using span

Well the real reason i need to know this is due to the working of my modal

In my modal's JavaScript code , its defined to trigger open modal window only when the class is "modal-button"

let open_modals = [];

  $(function() {

    // Get the button that opens the modal
    // read all the control of any type which has class as modal-button
    var btn = document.querySelectorAll(".modal-button");

Below is the html code which works perfectly along with this

<!-- Trigger/Open The Modal -->
<a href="#myModal1" class="modal-button">Click Me</a>

Although i want the text "Click Me" to not inherit the properties of class "modal-button" but still have that class ,so modal opening functionality is not broken. Hence i tried something like this...

<!-- Trigger/Open The Modal -->
<div class="modal-button">
<a href="#myModal1"><span class="text">Click Me</span></a>
</div

But it is breaking the modal opening functionality probably because the text-"Click Me" is not inhereting class "modal-button" due to the span tag

Hence i think i have to find an alternative of span tag for styling inline elements

Hopefully someone can give me a better approach to this Thanks in advance

Upvotes: 0

Views: 318

Answers (1)

kshetline
kshetline

Reputation: 13682

There's nothing stopping you from having two classes on the same element like this:

<a href="#myModal1" class="modal-button text">Click Me</a>

The second class listed will take priority over the first for styling, but the element will still be found by any CSS query that looks for the first class.

Upvotes: 2

Related Questions