change color of specific residue

[pooriyapfn]

When I want to change the color for a small portion of the residue or just one of them, it will not change anything. However, when I increase the selection range, it will affect the structure. How can I fix that?

For example:

loadedStructure.addRepresentation("cartoon", {
  sele: `:B`,
  color: color[1],
  aspectRatio: 5.7,
  subdiv: 10,
});
loadedStructure.addRepresentation("cartoon", {
  sele: `:B and (10-12)`,
  color: "red",
  aspectRatio: 5.7,
  subdiv: 10,
});

In this code, it cannot show any red on the structure. However, when we change (10-13), it shows red. Also, I want to change the color of the tenth residue to red, but I can't. Please let me know how I can do that.

[pooriyapfn]

Also, in this example, if you change the range to (18-20) or make it smaller, it doesn't affect the structure.

[papillot]

In both examples, 2 different representations are created and are superposed.
If what you are looking for is having a part of a cartoon representation in one color and a selection in another color, you should use only one representation and a custom color scheme. See the documentation here for selection based coloring: https://nglviewer.org/ngl/api/manual/coloring.html#selection-based-coloring

Regarding cartoon representations, there is a known limitation that only stretches of 4 residues or more can be represented. This is a limitation from the implementation of the spline algorithm which requires 4 coordinates for the Catmull-Rom interpolation. For this reason sele: ':B and (10-12)' will probably not render anything.

In the codepen example, I guess that what you are trying to achieve is representing the bulk of the protein structure as a transparent cartoon and only the stretch of interest as opaque colored segment. In that case, you would indeed need to use 2 representations because opacity is a global setting. And then you unfortunately have to workaround the 4 residues limitation.