Is it possible to change html content without using JavaScript?

Question

I have a project where I use only HTML and CSS. Is it possible to change the content of an HTML element at any event in the browser, for example, you use JavaScript ".innerHTML", but only using CSS.

For example, using @media screen and(..)

It would be convenient to even remove the current class name and add another class to the window size.

Answer 1

It completely depends on what action you want to activate, but in general, yes, it is possible.

Here's an example based on width:

HTML

<div id="something-awesome"></div>

CSS

#something-awesome {
  &:before {
    content: "This is some great text here.";
  }
}

@media (min-width: 500px) {
  #something-awesome {
    &:before {
      content: "This is some other super great text.";
    }
  }
}

Here is a script showing how the example works: https://jsfiddle.net/ttLc7a4t/2/

, .

Answer 2

html JavaScript?

CSS, no.

CSS.

CSS overflow:hidden

, , .

div,
div span {
display: inline-block;
width: 150px;
height: 50px;
font-size: 36px;
line-height:50px;
font-weight: bold;
text-align: center;
}

div {
float: left;
background-color: rgb(207,207,207);
border: 1px solid rgb(0,0,0);
}

div div {
position: relative;
z-index: 12;
width: 150px;
border: none;
}

div:nth-of-type(4),
div:nth-of-type(6) {
clear:left;
}

div:nth-of-type(4) {
margin-right: 152px;
}

div.textbox {
position: relative;
top:-52px;
left: -304px;
overflow: hidden;
}

.textbox div {
background-color: red;
}

div:nth-of-type(2):hover ~ .textbox div {
top: -50px;
}

div:nth-of-type(3):hover ~ .textbox div {
top: -100px;
}

div:nth-of-type(4):hover ~ .textbox div {
top: -150px;
}

.textbox:hover div {
top: -200px;
}

div:nth-of-type(5):hover ~ .textbox div {
top: -250px;
}

div:nth-of-type(6):hover ~ .textbox div {
top: -300px;
}

div:nth-of-type(7):hover ~ .textbox div {
top: -350px;
}

div:nth-of-type(8):hover ~ .textbox div {
top: -400px;
}

div:nth-of-type(2):hover,
div:nth-of-type(2):hover ~ .textbox {
background-color: orange;
}

div:nth-of-type(3):hover,
div:nth-of-type(3):hover ~ .textbox {
background-color: yellow;
}

div:nth-of-type(4):hover,
div:nth-of-type(4):hover ~ .textbox {
color: white;
background-color: green;
}

.textbox:hover {
color: white;
background-color: black;
}

div:nth-of-type(5):hover,
div:nth-of-type(5):hover ~ .textbox {
color: white;
background-color: blue;
}

div:nth-of-type(6):hover,
div:nth-of-type(6):hover ~ .textbox {
color: white;
background-color: purple;
}

div:nth-of-type(7):hover,
div:nth-of-type(7):hover ~ .textbox {
background-color: white;
}

div:nth-of-type(1):hover,
div:nth-of-type(8):hover,
div:nth-of-type(8):hover ~ .textbox {
background-color: red;
}

<section>

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

<div class="textbox">
<div>
<span>Box 1</span>
<span>Box 2</span>
<span>Box 3</span>
<span>Box 4</span>
<span>Box 5</span>
<span>Box 6</span>
<span>Box 7</span>
<span>Box 8</span>
<span>Box 9</span>
</div>
</div>

</section>

 

Answer 3

, content :after :before, / .

.innerHTML CSS.

Answer 4

. CSS , . .

CSS 2.1 - , . , CSS 2.1 - .

, CSS, . , ( ) content.

In addition, CSS Scoping allows you to replace the contents of a shadow tree element , but you need to create JS to create this shadow tree.