Is it possible to use separate classes for each category in the front end to design elements differently instead of relying on specific element IDs? This would save time as I wouldn’t need to manually add the same code for different categories. For example, when the category is “Festanstellung,” I want to apply a pastel blue background, and when it’s “Praktikum,” it should be pastel green. However, currently, I have to include both category names and corresponding styles in the CSS code.
As shown in the image above, the middle job does not have the same CSS rule applied because it lacks a category class, even though a category is selected for it. Consequently, I have to manually add the same CSS code that I applied to other elements for this each job every time..
.post-13519::before{
content:”Praktikum”;
background-color: #daffe4;
width: 100%;
text-align: center;
font-size: 22px;
font-weight: bolder;
padding: 8px 0;
}
.post-15513::before{
content:”Festanstellung”;
background-color: #deefff;
width: 100%;
text-align: center;
font-size: 22px;
font-weight: bolder;
padding: 8px 0;
}