1. Display element B if element A is empty

In this example, we have a table app displaying student information. Some have grades, and some don't. We want to show "No grades yet" when necessary.

HTML template:

<h2>{{Name}}</h2> 
<p> {{Job}}</p> 
<div class="grades_container"> 
   <p>Grades : </p> 
   <p class="grades">{{Grades}}</p> 
   <p class="no_grades">No grades yet</p> 
</div>

CSS Style:

.grades_container{ 
background:lightgrey 
} 
.no_grades{
display:none 
} 
.grades:empty + .no_grades{ 
display:block 
}

Copy this template

2. Display element B if element A's attribute is empty

In this example, we have a table app of team members. Some of them have profile photos while some don't. We need to customize the template so that it won't display a broken image when someone's {{photo}} column is empty - and instead display a generic avatar.

HTML template:

<img class="profilePicture" src='{{Picture}}'> 
<img class="noProfilePicture" src="yourDefaultLinkPicture"> 
<p>{{Name}} - {{Job}}</p>

CSS Style:

.noProfilePicture{ 
display:none 
} 
.profilePicture[src=""] { 
display: none; 
} 
.profilePicture[src=""]:empty + .noProfilePicture{ 
display: block; 
}

Copy this template

With this code, we keep a default image hidden with 'display:none;' and we hide this image and display the default one if the src of profilePicture is empty.

3. Display and style elements depending on their value

In this example, we will create a conditional template that will display different content depending on the referenced-value of a {{marker}}. We will create a simple to-do list: the task can either have 'done', 'postponed' or 'to do' as its status. Tasks that are done will also display a completion date.

HTML template:

<div class="taskContainer">
  <strong>{{Task}}</strong>
  <p data-status="{{Status}}" class="status"></p>
  <p class="date">Done the : {{Done the}}</p>
</div>

CSS Style:

.status[data-status="postponed"]:after {
 content : "This task was postponed.";
 color : orange
}

.status[data-status="to do"]:after {
 content : "This task still has to be done.";
 color : blue
}

.status[data-status="done"]:after {
 content : "This task is done ! ";
 color : green
}

.date { 
 display : none 
}

.status[data-status="done"] + .date {
 display : block
}

Copy this template