How can I show only one specific div from an entire page?-CodePudding

If I have something like this:

<div  background-color="#363636">
  <div >
    <div data-src="https://example.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://example2.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://exampl3.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://exampl4.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://exampl5.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://exampl6.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://exampl7.com">Hello world</div>
  </div>
</div>

How can hide everything else (including the layout div) except for the element with attribute data-src="https://exampl4.com" using only CSS?

CodePudding user response：

You can use [data-value: "exact value"] to select elements with data attributes in CSS. Here is a blog about it.

However, you can't use display: none on the parent as it will override the child elements display property. And it isn't even needed as there will be nothing else except the div you wanted to display.

.card > *{
  display: none;
  }
.card > [data-src="https://exampl5.com"]{
  display: flex;
 }

<div  background-color="#363636">
  <div >
    <div data-src="https://example.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://example2.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://exampl3.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://exampl4.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://exampl5.com">Hello world 5</div>
  </div>
  <div >
    <div data-src="https://exampl6.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://exampl7.com">Hello world</div>
  </div>
</div>

CodePudding user response：

You can try to hide the the parent using visibility : hidden;. Create new class for the desired child, select the element from the parent and set the properties to visibility : visible;

.layout{
  visibility : hidden;
}

.layout > .card-visible {
  visibility: visible;
}

<div  background-color="#363636">
  <div >
    <div data-src="https://example.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://example2.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://exampl3.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://exampl4.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://exampl5.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://exampl6.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://exampl7.com">Hello world</div>
  </div>
</div>

CodePudding user response：

You can hide every element with visibility: hidden and then use a css-selector to only show the elements with the correct data-attribute:

.card > div[data-src="https://exampl4.com"] {
    visibility: visible;
}

A detailed guide about attribute selectors can be found here.

If you want that none of the hidden elements takes up any space of the page, use display: none and display: block instead of visibility.

Here‘s an example with visibility:

.card > div {
    visibility: hidden;
}
.card > div[data-src="https://exampl4.com"] {
    visibility: visible;
}

<div  background-color="#363636">
  <div >
    <div data-src="https://example.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://example2.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://exampl3.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://exampl4.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://exampl5.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://exampl6.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://exampl7.com">Hello world</div>
  </div>
</div>

And Here‘s an example with display:

.card > div {
    display: none;
}
.card > div[data-src="https://exampl4.com"] {
    display: block;
}

<div  background-color="#363636">
  <div >
    <div data-src="https://example.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://example2.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://exampl3.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://exampl4.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://exampl5.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://exampl6.com">Hello world</div>
  </div>
  <div >
    <div data-src="https://exampl7.com">Hello world</div>
  </div>
</div>