Adjust the color of the background in the p element with a touch

Question

Adjust the color of the background in the p element with a touch

This webpage contains multiple instances of the <p> element. I want to change the background color of the paragraph that a mobile user touches. When another paragraph is touched, the previously selected paragraph should revert back to its original "default white" background color.

I have tried several selectors with no success. Is there a way to achieve this using CSS? Thank you for your help.

edit
I have 2-3 lines of data that need to be shown to the user. I decided to use paragraphs for each group of 2-3 lines so I can format and display the data like a vertical list. Therefore, I want to be able to select an item from the list and perform other actions related to the selected item.

.selectable:focus {
    background-color: lightgray;
}

<template name="myName">
  <p class="selectable"><b>{{value.[0]}}</b><br/>{{value.[1]}}<br/>{{value.[2]}}</p>
</template>

html css

Answer 1

Answer №1

After taking @CBroe's advice into consideration, you have the option to implement the following:

<p class="selectable" tabindex="0"> Paragraph 1 </p>
<p class="selectable" tabindex="0"> Paragraph 2 </p>
<p class="selectable" tabindex="0"> Paragraph 3 </p>
<p class="selectable" tabindex="0"> Paragraph 4 </p>

.selectable:focus {
    background-color: lightgray;
}

To see a demo, visit the jsfiddle link.

If you're interested in learning more about tabindex, check out this resource here.

Answer 2

After taking @CBroe's advice into consideration, you have the option to implement the following:

<p class="selectable" tabindex="0"> Paragraph 1 </p>
<p class="selectable" tabindex="0"> Paragraph 2 </p>
<p class="selectable" tabindex="0"> Paragraph 3 </p>
<p class="selectable" tabindex="0"> Paragraph 4 </p>

.selectable:focus {
    background-color: lightgray;
}

To see a demo, visit the jsfiddle link.

If you're interested in learning more about tabindex, check out this resource here.

Answer 3

Answer №2

To achieve this effect using jQuery, you can follow this code snippet:

jQuery:

$("p.selectable").click(function(){
  $("p.selectable").removeClass("clicked");
  $(this).addClass("clicked");
})

CSS:

p.selectable {
  background:white;
  height:100px;
}
p.selectable.clicked {
  background: red;
}

You can view a demonstration on jsfiddle. While it is challenging to achieve this solely with CSS as it is primarily for styling, JavaScript allows for more interactive features. (There are hacky CSS methods like overlaying invisible checkboxes over paragraphs, but let's not delve into that)

UPDATE: An alternative method involves adding a tabindex as recommended by @CBroe. It's a clever trick :) For additional actions triggered by paragraph clicks, opt for the JavaScript approach. If only style changes are needed, stick with the CSS solution.

Answer 4

To achieve this effect using jQuery, you can follow this code snippet:

jQuery:

$("p.selectable").click(function(){
  $("p.selectable").removeClass("clicked");
  $(this).addClass("clicked");
})

CSS:

p.selectable {
  background:white;
  height:100px;
}
p.selectable.clicked {
  background: red;
}

You can view a demonstration on jsfiddle. While it is challenging to achieve this solely with CSS as it is primarily for styling, JavaScript allows for more interactive features. (There are hacky CSS methods like overlaying invisible checkboxes over paragraphs, but let's not delve into that)

UPDATE: An alternative method involves adding a tabindex as recommended by @CBroe. It's a clever trick :) For additional actions triggered by paragraph clicks, opt for the JavaScript approach. If only style changes are needed, stick with the CSS solution.

Answer 5

Answer №3

One unconventional approach to achieve this is by using the :checked pseudo-selector along with text to switch its "selected" status.

.selectable {
  display: none;
}

.selectable:checked + label {
  color: red;
}

<input type="checkbox" id="unique-id" class="selectable">
<label for="unique-id">
  <b>{{value.[0]}}</b><br/>{{value.[1]}}<br/>{{value.[2]}}

</label>

This method eliminates the need for JavaScript and offers stable performance on various devices and platforms.

If you have any queries or require further clarification, feel free to reach out!

Answer 6

One unconventional approach to achieve this is by using the :checked pseudo-selector along with text to switch its "selected" status.

.selectable {
  display: none;
}

.selectable:checked + label {
  color: red;
}

<input type="checkbox" id="unique-id" class="selectable">
<label for="unique-id">
  <b>{{value.[0]}}</b><br/>{{value.[1]}}<br/>{{value.[2]}}

</label>

This method eliminates the need for JavaScript and offers stable performance on various devices and platforms.

If you have any queries or require further clarification, feel free to reach out!

Answer 7

Answer №4

First, set up an event listener for the desired action
Then, target the specific elements where you want this action to apply
Lastly, add the functionality you need - such as changing the background color by adding a new class and removing any existing color.
```
$("p").on("click",function(){
    $('.new-color').removeClass('new-color');
    $(this).addClass('new-color');
});
```

Answer 8

First, set up an event listener for the desired action
Then, target the specific elements where you want this action to apply
Lastly, add the functionality you need - such as changing the background color by adding a new class and removing any existing color.
```
$("p").on("click",function(){
    $('.new-color').removeClass('new-color');
    $(this).addClass('new-color');
});
```

Adjust the color of the background in the p element with a touch

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Transforming a dropdown menu to inline using CSS

Centered image in circles positioned horizontally and vertically, all styled in Bootstrap 4

Ajax requests across different domains are unsuccessful, even when attempting to access a file on

Tips for perfectly aligning an "inline-block" element with an ordered list (ol)

The Bootstrap column and row elements are having difficulty cooperating with their respective parents and children

Fluid Bootstrap Container Experiencing Alignment Issues with Rows when CSS Height Property set to 100%

Adjusting the position of the floating image on the left side will impact the height of the container

Showing off the latest products at the top of the list

What are the steps to display the entire image instead of a cropped version?

Clicking on a select box causes the scrollbar area to vanish, shifting all the page content to the right

The toggle feature in Bootstrap is stuck in the "on" position and refuses to "untoggle."

Determine the X and Y coordinates of a circle element using HTML and Javascript

GET requests will not be allowed

Full image with stylish CSS text overlay

Adjust the Weight of a Single Word in H1 CSS

Guide on setting a personalized color for progress bars in Bootstrap 4

What is the correct way to format text as superscript?

Is it possible to execute HTML5/JS code without relying on the client side?

Generating CSS and PHP through Grunt

Can you tell me why one of these Sass codes is throwing an invalid CSS error while the other is not?