How can CSS 3 hide an element when :target is different and show it when :target is empty?

Question

How can CSS 3 hide an element when :target is different and show it when :target is empty?

Is there a way to achieve this concept using only CSS3?

I have an idea where if the user goes to http://example.com, I want to display a specific element on my page, such as <section id="main" />. However, if they visit http://example.com/#pics, I would like to showcase a photo gallery instead.

I am aware that this task can be accomplished with JQuery, but I am eager to explore the possibilities of utilizing CSS3. This website is just for experimental purposes, so cross-browser compatibility is not essential, though I am open to incorporating fallback options if needed.

css css-selectors target

Answer 1

Answer №1

To utilize this solution, ensure you are targeting elements with the "hideme" class. Make adjustments as necessary for your specific scenario.

You can achieve any "if not" condition using the :not() pseudo-class. In this instance:

.hideme:not(:target) {display: none;}

However, as browser support for this approach is limited, consider an alternative method like:

selector {take action}
selector:target {reverse the action}

Dealing with the CSS property display can be complex due to varying default values for different elements. Therefore, you could opt for changing visibility:

.hideme {visibility: hidden;}
.hideme:target {visibility: visible;}

Another possibility is to employ position:absolute and position:static to detach the selected item from the document's layout flow.

Answer 2

To utilize this solution, ensure you are targeting elements with the "hideme" class. Make adjustments as necessary for your specific scenario.

You can achieve any "if not" condition using the :not() pseudo-class. In this instance:

.hideme:not(:target) {display: none;}

However, as browser support for this approach is limited, consider an alternative method like:

selector {take action}
selector:target {reverse the action}

Dealing with the CSS property display can be complex due to varying default values for different elements. Therefore, you could opt for changing visibility:

.hideme {visibility: hidden;}
.hideme:target {visibility: visible;}

Another possibility is to employ position:absolute and position:static to detach the selected item from the document's layout flow.

Answer 3

Answer №2

If you're looking to hide specific elements based on the :target selector or the :not selector, consider the following code snippet:

div:not(:target){
  display:none
}

#main:target {
   display:block;
}

#pics:target {
    display:block;
}

For more information, refer to:
http://www.w3.org/TR/selectors/ – Section 6.6.7 covers the :not selector (no target from their file)

as well as

http://www.w3.org/TR/selectors/#target-pseudo

Answer 4

If you're looking to hide specific elements based on the :target selector or the :not selector, consider the following code snippet:

div:not(:target){
  display:none
}

#main:target {
   display:block;
}

#pics:target {
    display:block;
}

For more information, refer to:
http://www.w3.org/TR/selectors/ – Section 6.6.7 covers the :not selector (no target from their file)

as well as

http://www.w3.org/TR/selectors/#target-pseudo

Answer 5

Answer №3

If you find yourself needing to target multiple elements in your code, you can achieve this by wrapping your code in various containers and using the target pseudo-class for selection.

Illustration

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" version="1.1">
<style>

/* Start with hiding elements */
.hide {
  display: none;
}
/* Display targeted elements */
#one:target .one,
#two:target .two {
display: block;
}

/* Additional elements selection */
#one:target .default,
#two:target .default {
display: none;
}

/* Color customization */
.one {
fill: red;
}
.two {
fill: yellow;
}


</style>
<g id="one">
<g id="two">
   <rect width="200" height="100" stroke="black" stroke-width="2" fill="green"/>
      <circle class="hide one" cx="50" cy="50" r="20"></circle>
      <circle class="hide two" cx="100" cy="50" r="20"></circle>
      <circle class="default" cx="150" cy="50" r="20"></circle>
</g>
</g>

</svg>

This approach may not be the most elegant, but it gets the job done effectively.

Answer 6

If you find yourself needing to target multiple elements in your code, you can achieve this by wrapping your code in various containers and using the target pseudo-class for selection.

Illustration

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" version="1.1">
<style>

/* Start with hiding elements */
.hide {
  display: none;
}
/* Display targeted elements */
#one:target .one,
#two:target .two {
display: block;
}

/* Additional elements selection */
#one:target .default,
#two:target .default {
display: none;
}

/* Color customization */
.one {
fill: red;
}
.two {
fill: yellow;
}


</style>
<g id="one">
<g id="two">
   <rect width="200" height="100" stroke="black" stroke-width="2" fill="green"/>
      <circle class="hide one" cx="50" cy="50" r="20"></circle>
      <circle class="hide two" cx="100" cy="50" r="20"></circle>
      <circle class="default" cx="150" cy="50" r="20"></circle>
</g>
</g>

</svg>

This approach may not be the most elegant, but it gets the job done effectively.

How can CSS 3 hide an element when :target is different and show it when :target is empty?

Answer №1

Answer №2

Answer №3

Illustration

Similar questions

Finding all instances of a specific class in Sublime Text 2

How can I use CSS to customize the appearance of the elements within an iframe?

Scrolling to the bottom of the page triggers jQuery to load additional content

Bootstrap is experiencing some glitches

Tips for Preventing Page Scrolling When Clicking on a Hashed A Tag in Content with a Fixed

Javascript editing enhancement for real-time changes

Checking the Value of the Second Child Element Using jQuery

Should pages be indexed to index.php or should the top and bottom parts of the page be created and included in all content pages?

Guide to positioning Navigation Bar in the center

The layout of the table is not formatted in a single continuous line

JQuery: the art of concealing and revealing

What is the process for changing an image on a webpage based on a dropdown list selection?

Ensure the webpage is set to have a minimum width of 1024 pixels

How can I use Jquery to animate an element to the right edge of the window?

How to add a background image in CSS with HTML's help

Guide on generating tabs with the power of Javascript and Jquery

Curved corners when an image is located on the border

Alignment of a Definition List with Omissions of Definitions

Font malfunctioning on Microsoft Edge and Internet Explorer

A different way to center elements using CSS