CODEWITHSUNDEEP
jqueryhtmlcss
Cory Norell
Cory Norell

Reputation: 75

External + Inline Styles vs. External Only

The Question + Overview

Below are two snippets containing a div being hidden initially, then shown with the click of a button and jQuery's .show(). Both divs have the style display: grid; being applied by external style sheet. The difference is as follows:

In example 1, inline specificity overrules the external style sheet. Grid layout is retained when div is shown.

In example 2, the display: grid; is being overridden by the cascade. Grid layout is not retained when div is shown.

It seems to me that both of the below snippets should have the same outcome, as both display: grid; styles are being overridden - albeit in seemingly slightly different ways.

What is happening here to cause the first example to work, and the second to break the grid layout?

I would prefer a technical, low level explanation if possible.

I included the jQuery tag in the off chance it's jQuery doing some magic I don't know about.

Example 1: Inline + External Styles

In the following snippet, I have set the display of a div to be display: grid; in an external style sheet.

I also set the display of the same div to display: none; inline.

I then show the div using jQuery's .hide() function, and the div retains its grid layout.

$(document).ready(function() {
  $('#show-div').click(function() {
    $('#inline-style-div').show();
  });
});
#inline-style-div {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 50px 50px;
}

.grid-number {
  margin: 0;
  padding: 10px 25px 10px 25px;
  background-color: #333;
  color: white;
}

.grid-number:nth-child(even) {
  padding: 10px 25px 10px 25px;
  background-color: #ccc;
  color: #333;
}

#show-div {
  margin-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="inline-style-div" style="display: none;">
  <h5 class="grid-number">1</h5>
  <h5 class="grid-number">2</h5>
  <h5 class="grid-number">3</h5>
  <h5 class="grid-number">4</h5>
  <h5 class="grid-number">5</h5>
  <h5 class="grid-number">6</h5>
</div>

<button type="button" id="show-div">Show the div</button>

Example 2: External Styles Only

In this snippet - with all else being equal - I have set the aforementioned div's display to display: grid; and display: none; sequentially in the external style sheet.

When I show the div in this example, the div does not retain its grid layout.

$(document).ready(function() {
  $('#show-div').click(function() {
    $('#external-style-div').show();
  });
});
#external-style-div {
  display: grid;
  display: none;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 50px 50px;
}

.grid-number {
  margin: 0;
  padding: 10px 25px 10px 25px;
  background-color: #333;
  color: white;
}

.grid-number:nth-child(even) {
  padding: 10px 25px 10px 25px;
  background-color: #ccc;
  color: #333;
}

#show-div {
  margin-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="external-style-div">
  <h5 class="grid-number">1</h5>
  <h5 class="grid-number">2</h5>
  <h5 class="grid-number">3</h5>
  <h5 class="grid-number">4</h5>
  <h5 class="grid-number">5</h5>
  <h5 class="grid-number">6</h5>
</div>

<button type="button" id="show-div">Show the div</button>

Upvotes: 1

Views: 69

Answers (1)

markmoxx
markmoxx

Reputation: 1532

Using jQuery's .show() is roughly equivalent to calling .css( "display", "block" ), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

In your first example, jQuery notices that the inline display value is set to none, so it removes that and lets the cascade take effect (thanks @Alohci).

In your second example, jQuery notices that the initial display value is set to none (ignoring the first assignment directly before it, as it has no idea about this), and so assumes that you want it set to block when you use show().

Reference

And further reading: How does jquery's show/hide function work? (similar question)

Upvotes: 3

Related Questions