Use CSS to change the style of each row depending on the content in it

1 - Display element B if element A is empty

In this example, we have a table view displaying student information. Some have grades, and some don't. We would like to display "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 view 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 a different content depending on the referenced-value of a {{marker}}. We are going to 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