Emphasizing sections using a specific class for paragraph highlighting

Question

Emphasizing sections using a specific class for paragraph highlighting

Is it possible to dynamically change the style of paragraphs based on certain classes? Let's say we have a text with a list of p elements and we want to modify the styles of paragraphs that come after specific classes, such as 'alert' or 'danger'. The order is important here - alerts come first followed by dangers. However, both are optional and can be preceded by other paragraphs that don't fall into those categories.

<div class='text'>

<p>Some paragraph0</p>

<p class="alert">Alert</p>
<p>Some paragraph1</p>
<p>Some paragraph2</p>

<p class="danger">Danger</p>
<p>Some paragraph3</p>
<p>Some paragraph4</p>

</div>

The main issue is figuring out how to apply style changes to elements that come after paragraphs with either the alert or danger class. Ideally, we should be able to specify whether these changes should be applied before or after the designated paragraphs.

.alert{
   background: #FFFF00;
    font-weight: bold;
}

.danger{
    background: #F00;
    font-weight: bold;
}

javascript html css

Answer 1

Answer №1

To address the issue of multiple warnings or dangers, you can utilize the ~ selector in CSS to target elements that come after either a danger or alert element. This solution takes into consideration the assumptions made in your particular case. However, please note that using this logic may result in unexpected behavior if there are multiple instances of warnings or dangers.

div.text p.alert ~ p:not(.danger), div.text p.alert {
    background: #FFFF00;
}

div.text p.danger ~ p:not(.alert), div.text p.danger {
    background: #F00;
}

div.text p.alert{
    font-weight: bold;
}

div.text p.danger{
    font-weight: bold;
}

Answer 2

To address the issue of multiple warnings or dangers, you can utilize the ~ selector in CSS to target elements that come after either a danger or alert element. This solution takes into consideration the assumptions made in your particular case. However, please note that using this logic may result in unexpected behavior if there are multiple instances of warnings or dangers.

div.text p.alert ~ p:not(.danger), div.text p.alert {
    background: #FFFF00;
}

div.text p.danger ~ p:not(.alert), div.text p.danger {
    background: #F00;
}

div.text p.alert{
    font-weight: bold;
}

div.text p.danger{
    font-weight: bold;
}

Answer 3

Answer №2

To select them specifically, do the following...

.alert p:not(:first-child) {color:orange;}

.danger p:not(:first-child) {color:purple;}

Answer 4

To select them specifically, do the following...

.alert p:not(:first-child) {color:orange;}

.danger p:not(:first-child) {color:purple;}

Answer 5

Answer №3

In the world of CSS, when you need to target all paragraphs following a danger or alert tag, look no further than the general sibling selector!

.danger ~ p, .alert ~ p { // selects all paragraphs after a danger or alert tag
    // insert your desired css rules here.
}

Answer 6

In the world of CSS, when you need to target all paragraphs following a danger or alert tag, look no further than the general sibling selector!

.danger ~ p, .alert ~ p { // selects all paragraphs after a danger or alert tag
    // insert your desired css rules here.
}

Answer 7

Answer №4

You have the ability to utilize `javascript` for this task. This method is effective in all scenarios.

This technique applies to elements with a class="text" that consist of one element with either class alert or class danger, or both.

If no elements possess class alert or class danger, then no action will be taken.

Below is the code: (execute the snippet)

Note: I am assigning an example class named specialClass to the targeted elements, and there are two buttons at the bottom to simulate adding styles before and after alert or danger.

function applyStyles(whenToStyle)
{
  // select all elements with class 'text'
  var elements = document.querySelectorAll('.text');
  
  // loop through all elements with class 'text'
  for(var i=0; i< elements.length; i++)
  {
    // set flags to false for new container of class 'text'
    var alertSeen = false;
    var dangerSeen = false;
    var hasAlert = false;
    var hasDanger = false;
    
    // fetch the children in order as they appear on the page
    var children = elements[i].children;
    
    // check if elements with class 'alert' or 'danger' exist
    if(elements[i].getElementsByClassName('alert').length > 0) hasAlert = true;
    if(elements[i].getElementsByClassName('danger').length > 0) hasDanger = true;
    
    // go through all children elements of the selected element
    for(var j=0; j< children.length; j++)
    {
      // if the classList doesn't contain 'alert' or 'danger'
      if(!children[j].classList.contains('alert') && !children[j].classList.contains('danger'))
      {
          if(whenToStyle == 'before')
          {
            if((!alertSeen && hasAlert) || (!dangerSeen && hasDanger))
            {
              children[j].classList.add('specialClass');
            }
          }
          else if(whenToStyle == 'after')
          {
            if((alertSeen && hasAlert) || (dangerSeen && hasDanger))
            {
              children[j].classList.add('specialClass');
            }
          }
      }
      else
      {
        // mark if we are on an element with class 'alert' or 'danger'
        if(children[j].classList.contains('alert')) alertSeen = true;
        else if(children[j].classList.contains('danger')) dangerSeen = true;
      }
    }
  }
}

.alert{
   background: #FFFF00;
    font-weight: bold;
}

.danger{
    background: #F00;
    font-weight: bold;
}

.specialClass
{
  background-color:#09f;
  color:#FFF;
  font-size:1.3em;
}

<div class='text'>

  <p>Some paragraph0</p>

  <p class="alert">Alert</p>
  <p>Some paragraph1</p>
  <p>Some paragraph2</p>

  <p class="danger">Danger</p>
  <p>Some paragraph3</p>
  <p>Some paragraph4</p>

</div>

<input type="button" value="click to apply before" onclick="applyStyles('before')" />
<input type="button" value="click to apply after" onclick="applyStyles('after')" />

Answer 8

You have the ability to utilize `javascript` for this task. This method is effective in all scenarios.

This technique applies to elements with a class="text" that consist of one element with either class alert or class danger, or both.

If no elements possess class alert or class danger, then no action will be taken.

Below is the code: (execute the snippet)

Note: I am assigning an example class named specialClass to the targeted elements, and there are two buttons at the bottom to simulate adding styles before and after alert or danger.

function applyStyles(whenToStyle)
{
  // select all elements with class 'text'
  var elements = document.querySelectorAll('.text');
  
  // loop through all elements with class 'text'
  for(var i=0; i< elements.length; i++)
  {
    // set flags to false for new container of class 'text'
    var alertSeen = false;
    var dangerSeen = false;
    var hasAlert = false;
    var hasDanger = false;
    
    // fetch the children in order as they appear on the page
    var children = elements[i].children;
    
    // check if elements with class 'alert' or 'danger' exist
    if(elements[i].getElementsByClassName('alert').length > 0) hasAlert = true;
    if(elements[i].getElementsByClassName('danger').length > 0) hasDanger = true;
    
    // go through all children elements of the selected element
    for(var j=0; j< children.length; j++)
    {
      // if the classList doesn't contain 'alert' or 'danger'
      if(!children[j].classList.contains('alert') && !children[j].classList.contains('danger'))
      {
          if(whenToStyle == 'before')
          {
            if((!alertSeen && hasAlert) || (!dangerSeen && hasDanger))
            {
              children[j].classList.add('specialClass');
            }
          }
          else if(whenToStyle == 'after')
          {
            if((alertSeen && hasAlert) || (dangerSeen && hasDanger))
            {
              children[j].classList.add('specialClass');
            }
          }
      }
      else
      {
        // mark if we are on an element with class 'alert' or 'danger'
        if(children[j].classList.contains('alert')) alertSeen = true;
        else if(children[j].classList.contains('danger')) dangerSeen = true;
      }
    }
  }
}

.alert{
   background: #FFFF00;
    font-weight: bold;
}

.danger{
    background: #F00;
    font-weight: bold;
}

.specialClass
{
  background-color:#09f;
  color:#FFF;
  font-size:1.3em;
}

<div class='text'>

  <p>Some paragraph0</p>

  <p class="alert">Alert</p>
  <p>Some paragraph1</p>
  <p>Some paragraph2</p>

  <p class="danger">Danger</p>
  <p>Some paragraph3</p>
  <p>Some paragraph4</p>

</div>

<input type="button" value="click to apply before" onclick="applyStyles('before')" />
<input type="button" value="click to apply after" onclick="applyStyles('after')" />

Emphasizing sections using a specific class for paragraph highlighting

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Acquiring row data upon checkbox selection: A step-by-step guide

How can I dynamically append content to the DOM when a user clicks?

Retrieve the element that is currently being hovered over within the same nested selector

Using TypeScript with Angular, you can easily include parameters to HTML tags

JS: Discovering an element's screen position consistently across various computers

Engaging Interactive Image/Graphic with React and HTML

Can anyone provide assistance with understanding the background-size property?

Unable to interact with a button through JavaScript using execute_script in Selenium

Bootstrap for a more streamlined container

Tips for Converting a JavaScript Array into JSON

Is there a way to use Media Queries to require CSS to load an image?

Using jQuery to fetch and display content only when the user hovers over

Resolving VSCode WebViewPanel access issues through a corporate proxy

Adjusting the document root in an Apache site's directory

How to load an iframe only upon clicking on a link

Retrieving image source from JSON data using AngularJS

What is the method for extracting latitude and longitude values individually from JSON data?

Verify the entered information in the input field and showcase it in the display box after pressing the ENTER key

What is the best way to ensure that my theme button changer has an impact on all pages throughout my website, not only on the

Toggle the class to slide in or out of the div