Photoshop Question posted in
The official user guide can be found here.

Merge CSS declarations in one, possible? – Photoshop

I am trying to face a little problem i have encountered with.

I am designing a map in leaflet. What i want to achieve is add a HTML label above each marker in a leaflet map, like in this photoshoped example:

enter image description here

Ok the code for each label to display it is:

HTML

<table>
    <tr>
        <td class="red"></td>
        <td class="yellow"></td>
        <td class="orange"></td>
        <td class="blue"></td>
    </tr>
</table>

CSS

table{
    border-collapse: collapse;
}
td{    
    padding:20px;
    border:5px solid black;
}
.red{
    background-color:#F15E66;
}
.yellow{
    background-color:#FFDB64;
}
.orange{
    background-color:#F58326;
}
.blue{
    background-color:#85B1DE;
}

check https://jsfiddle.net/YameenYasin/cx1ka3Ly/ for the live code.

Ok the problem comes when leaflet labels only allow to add one unique CSS entry for each label. Example:

marker.bindLabel('<table><tr><td class="red"></td><td class="yellow"></td><td class="orange"></td><td class="blue"></td></tr></table>',
    {noHide: true, className: "onlyone", offset: [-10, -40] });

Notice the className: “onlyone” property. I can only put one css there and the “class” tags added in the html code are not executed (they do not work).

My conclusion is that i need to add all the CSS code in only one classname called “onlyone” so that then i can do className: “onlyone”.

Is this possible?

Regards,

Tags:

2

Answers


  1. 0

    It’s possible to add a single class to the tr and then target the children by ‘number’ using nth-child as follows.

    table {
  border-collapse: collapse;
}
td {
  padding: 20px;
  border: 5px solid black;
}
.multi td:nth-child(1) {
  background-color: #F15E66;
}
.multi td:nth-child(2) {
  background-color: #FFDB64;
}
.multi td:nth-child(3) {
  background-color: #F58326;
}
.multi td:nth-child(4) {
  background-color: #85B1DE;
}
    <table>
  <tr class="multi">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
    Login or Signup to reply.
  2. 0

    Here you are:
    https://jsfiddle.net/cx1ka3Ly/2/

    table{
    border-collapse: collapse;
}
td{    
    padding:20px;
    border:5px solid black;
}
.onlyone:nth-child(1){
    background-color:#F15E66;
}
.onlyone:nth-child(2){
    background-color:#FFDB64;
}
.onlyone:nth-child(3){
    background-color:#F58326;
}
.onlyone:nth-child(4){
    background-color:#85B1DE;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search