Is it possible to change html content without using JavaScript?

Question

I've a project where I only use HTML and CSS. Is it possible to change the content of an HTML element on some event with browser, like you do JavaScript '.innerHTML' but only using CSS.

For example using @media screen and(..)

Even removing current classname and appending another class on window re-size would be suitable.

Answer 1

It completely depends on what action you're wanting to trigger the change on, but in general, yes, this 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's a fiddle to show how the example works: https://jsfiddle.net/ttLc7a4t/2/

Change the width of the output box to see it in action.

Answer 2

No. CSS can only be used to set the stylying, not the content. Mixing both would be against the separation of concerns.

CSS 2.1 is a style sheet language that allows authors and users to attach style to structured documents. By separating the presentation style of documents from the content of documents, CSS 2.1 simplifies Web authoring and site maintenance.

That said, you can use CSS to look like you changed contents. For example, you can hide an element and show another one, or change the generated content (which is not real content) through the content property.

Additionally, CSS Scoping allows you to replace the contents of an element with a shadow tree, but you need JS to create that shadow tree.