Leveraging the adjacent sibling CSS combinator (+) alongside HgClass and varying values

Question

Leveraging the adjacent sibling CSS combinator (+) alongside HgClass and varying values

I'm currently exploring the feasibility of a specific idea, and I'm wondering if there's a better approach I should consider.

Here's a basic representation of where I am

My primary list is constantly being modified by other processes by adding or removing items. I've been using NgFor to generate the items and utilizing the adjacent sibling combinator in my style sheet (+) to add margin-top to all items except the first one. Additionally, I use ngClass to apply the class itself. So far, so good...

Now, I want the value of margin-top to be dynamic and linked to a value from another service.

Therefore, my question simply is: Is there a way to incorporate the adjacent sibling selector with a dynamic value for the style it applies?

css angular

Answer 1

Answer №1

Due to limitations in cross-browser variable support, one workaround is to use a simple script to dynamically add CSS styles as needed.

window.addEventListener('load', function() {
  loadStyle(20);
  setTimeout(function() { loadStyle(40); }, 1000);
  setTimeout(function() { loadStyle(60); }, 2000);
})

function loadStyle(margin) {
  var node = document.querySelector('my-app style') || document.createElement("style");
  var css = ".my-item+.my-item{margin-top: "+margin+"px;}"
  node.type = 'text/css';
  if (node.styleSheet){
    node.styleSheet.cssText = css;
  } else {
    node.appendChild(document.createTextNode(css));
  }
  document.querySelector('my-app').appendChild(node);
}

.my-item{
  background-color: red;
}
.my-item+.my-item{
  margin-top: 20px;
}

<my-app>
  <div class='my-item'>A</div>
  <div class='my-item'>B</div>
  <div class='my-item'>C</div>
</my-app>

Answer 2

Due to limitations in cross-browser variable support, one workaround is to use a simple script to dynamically add CSS styles as needed.

window.addEventListener('load', function() {
  loadStyle(20);
  setTimeout(function() { loadStyle(40); }, 1000);
  setTimeout(function() { loadStyle(60); }, 2000);
})

function loadStyle(margin) {
  var node = document.querySelector('my-app style') || document.createElement("style");
  var css = ".my-item+.my-item{margin-top: "+margin+"px;}"
  node.type = 'text/css';
  if (node.styleSheet){
    node.styleSheet.cssText = css;
  } else {
    node.appendChild(document.createTextNode(css));
  }
  document.querySelector('my-app').appendChild(node);
}

.my-item{
  background-color: red;
}
.my-item+.my-item{
  margin-top: 20px;
}

<my-app>
  <div class='my-item'>A</div>
  <div class='my-item'>B</div>
  <div class='my-item'>C</div>
</my-app>

Answer 3

Answer №2

One possible approach is to apply CSS styling:

<div *ngFor="let member of memberList" [ngClass]="'custom-style'" [style.margin]="customMargin">{{member}}</div>

customMargin = '0 0 0 9px';

Answer 4

One possible approach is to apply CSS styling:

<div *ngFor="let member of memberList" [ngClass]="'custom-style'" [style.margin]="customMargin">{{member}}</div>

customMargin = '0 0 0 9px';

Leveraging the adjacent sibling CSS combinator (+) alongside HgClass and varying values

Answer №1

Answer №2

Similar questions

What is the best way to display the letter X (Clear) in the Chrome INPUT field with the type

What is the best way to bring in Angular2 components that have been compiled into one single file

Error encountered while attempting to utilize 'load' in the fetch function of a layer

Error: unable to access cordova in Ionic 2Another wording for this error message could be:

Utilizing Angular 4 to dynamically load a recursive template with input values

Generate a container element that occupies the remaining space on the screen under a header of adjustable height

Error: Unable to access 'nativeElement' property from undefined object when trying to read HTML element in Angular with Jasmine testing

"Encountering a persistent issue with Angular POST requests to Spring Security JWT login consistently

"Silently update the value of an Rxjs Observable without triggering notifications to subscribers

What is the best way to center align and add an icon to the header in Ionic?

Check the attribute sequence in Angular HTML templates

Notification during image loading

Pause before sending each request

Tips for achieving the Bootstrap 5 Modal Fade Out effect without using jQuery or any additional plugins apart from Bootstrap

How come there is a varying gap between the fixed header and the main content when the height is set to 10%?

How to design a bell curve using CSS styling

The specified 'image' identifier has not been defined. There is no such member within 'never'

Ensure that only numerical values in decimal form are permitted when entering data in Angular

Alter the appearance of a webpage by pressing a key. (Using Vue.js)

Adjust the position of an unordered list element in CSS to move it lower on