Repeating HTML units, but same identity → Does css has some feature like we have "this" in JavaScript

This is an example: https://codepen.io/codeispoetry/pen/rNQVvEO
here irrespective of what you click only the first one will work, the reason is also known: the same ID. The IDs can be changed and dynamically allotted either through server-side programming or through JS also.

This input tag is just one example there are many things that are of repetitive nature.

Real Life example:

One Yoga resort in Greece has an event management system. they offer yoga holidays, past life regression, and other events. They have many events with their unique description page, and also they aggregate snippets for all events on the home page as in the blog with many similar features such as pay button, toggle buttons etc.

How to handle such recurring HTML units so that only that snippet should interact with user input?

In response to the question Does css has some feature like we have “this” in JavaScript a CSS class is nowhere close to an OOP class. A CSS class has no members; they certainly have no methods. For OOP classes there is one and only definition for every class and zero or more implementations (objects). There is no equivalent of implementations for CSS and therefore no this.

2 Likes

1) Does CSS have an equivalent to JavaScript’s this?

No, because that’s not how CSS fundamentally works.

When you think of a language like JavaScript, you’re thinking of imperative languages. Imperative languages work by telling the thing you’re running a program on how to do something. For example, suppose you want to wear a blue shirt. The imperative paradigm might be something like:

  1. Open your dresser
  2. Look for shirts
  3. If the shirt is blue, take it out
  4. Put on the shirt

CSS and HTML are declarative languages. Declarative langauges work by telling the thing you’re running a program on what you want done. It’s then the platform’s job to know how to do it. The declarative paradigm for wearing a blue shirt might look more like:

  1. Wear a shirt in the color blue

Because you’re not telling the platform how to achieve what you want, you’re limited to the things it knows how to do–but you don’t have to worry about how it’s going to accomplish that.

For example, when you write this HTML:

<div>This is a div.</div>

You don’t have to care how it works under the hood. You don’t have to care how Firefox renders a div vs how Chrome renders a div. As long as you use HTML that’s compatible with any browsers you want to support, you don’t have to really care about how it works.

In JavaScript, this allows you to more easily work with the procedure you’re working on–very useful for an imperative language. On the other hand, HTML and CSS aren’t meant to be used for building complex procedures, so they don’t offer anything similar.

2) How to get the code provided to allow only one user to interact with it at a time.

Like you said, you can’t reuse IDs. Change your HTML to something like this. You should also give each input a name–you’re going to need that when the form gets submitted.

<form class="form-toggle" action="/test.html/">
	<input type="checkbox" id="option1" name="option1" /><label for="option1">Option 1</label>
	<input type="checkbox" id="option2" name="option2" /><label for="option2">Option 2</label>
	<input type="checkbox" id="option3" name="option3" /><label for="option3">Option 3</label>
	<input type="submit">
</form>

If you test this out (naming the file test.html), check the second box, and hit ‘submit’, you should see that the URL will become something like [Location file is saved]/test.html/?option2=on. That’s looking for the name, not the ID, which is why I said you needed to add name values. This will get used to pass data back to the server.

3) I have a lot of repetitive HTML. How can I deal with that?

What server-side language are you using? You would probably use that to generate repeating blocks of HTML. In PHP, for instance, you could do something like this:

<?php

$options = [
	[
		'name' => 'option1',
		'label' => 'Option 1'
	],
	[
		'name' => 'option2',
		'label' => 'Option 2'
	],
	[
		'name' => 'option3',
		'label' => 'Option 3'
	]
];
$tab_indent = str_repeat("\t", 3);
$new_line = "\n";

?>
<!doctype html>
<html lang="en">
	<head>
		<link rel='stylesheet' href='style.css' type='text/css' />
	</head>
	<body>
		<form class="form-toggle" action="test.html/">
<?php

foreach ( $options as $option ) {
	$input_name = $option['name'];
	$input_label = $option['label'];
	$input_tag = '<input type="checkbox" name="' . $input_name . '" id="' . $input_name . '" /><label for="' . $input_name . '">' . $input_label . '</label>';
	echo $tab_indent . $input_tag . $new_line;
}

?>
			<input type="submit">
		</form>
	</body>
</html>

If you’re not at the point of doing server-side stuff, that’s fine–you’ll probably just need to live with the repetitive HTML for now, then.

2 Likes

Generally, stop using IDs unless you must. For styling, use classes or element/attribute selectors. For your labels, put the input inside the label if you can. If you must use IDs, then you need to find a way to make them unique such as by appending a random number or something.

For your, given example, you can eliminate the IDs entirely by some simple restructuring.

<label>
  <input type="checkbox">
  <span>Toggle</span>
</label>
<label>
  <input type="checkbox">
  <span>Toggle</span>
</label>
<label>
  <input type="checkbox">
  <span>Toggle</span>
</label>
<label>
  <input type="checkbox">
  <span>Toggle</span>
</label>

With CSS

input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
}

input[type=checkbox] + span {
  cursor: pointer;
  text-indent: -9999px;
  width: 200px;
  height: 100px;
  background: grey;
  display: block;
  border-radius: 100px;
  position: relative;
}

input[type=checkbox] + span::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 90px;
  height: 90px;
  background: #fff;
  border-radius: 90px;
  transition: 0.3s;
}

input:checked + span {
  background: #bada55;
}

input:checked + span::after {
  left: calc(100% - 5px);
  transform: translateX(-100%);
}

input[type=checkbox] span:active::after {
  width: 130px;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.