I have a wordpress page, and I would like to add a bottom border to the post, according to the post category. If post has only 1 category, then I use:
.category-daily {
border-bottom: red solid 3px;
}
But there are posts who have 2 categories, and therefore 2 classes, for example: category-weekly and category-daily What can I do to add a red bottom border for daily category and after that add a yellow bottom border for weekly category
Elements cannot have two borders..but you can fake it with a pseudo-element.
body {
text-align: center;
}
div {
height: 100px;
width: 150px;
display: inline-block;
box-shadow: inset 0 0 1px 0 black;
/* for demo purposes only */
padding-bottom: 6px;
position: relative;
}
.category-daily:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
border-bottom: red solid 3px;
}
.category-weekly:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
border-bottom: yellow solid 3px;
}
.category-daily.category-weekly:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
border-top: red solid 3px;
border-bottom: yellow solid 3px;
}<div class="category-daily"></div>
<div class="category-weekly"></div>
<div class="category-daily category-weekly"></div>There is no possibility to define more than one border bottom.
If you wish to achive such visual result you have to add an extra element for each category you're applying.
For example with div element for each category:
html
<div class="post">
<div class="daily"></div>
<div class="weekly"></div>
</div>
css
.post .daily{
background:red;
height:1px;
width:100%;
}
.post .weekly{
background:yellow;
height:1px;
width:100%;
}
Or even better: a hr for each category
html
<div class="post">
<hr class="daily"/>
<hr class="weekly" />
</div>
css
.post .daily{
background-color:red;
color:red;
border:0;
height:1px;
}
.post .weekly{
background-color:yellow;
color:yellow;
border:0;
height:1px;
}
One option is to use box-shadow for the other border, like this:
.daily {
border-bottom: 3px solid red;
}
.weekly {
box-shadow: 0 3px 0 yellow;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="daily">This is daily</div>
<div class="daily">This is daily</div>
<div class="weekly">This is weekly</div>
<div class="daily">This is daily</div>
<div class="daily weekly">This is daily and weekly</div>
<div class="weekly">This is weekly</div>
<div class="daily">This is daily</div>
</body>
</html>You can't have two border-bottoms, but if you're comfortable with jquery, this may work for you:
$('.category-daily.category-weekly').wrap('<div class="bbottom"></div>');div{
width: 60px;
height: 60px;
}
.category-daily.category-weekly {
border: 1px solid black;
border-bottom: 9px solid red;
}
.category-daily{
border: 1px solid black;
border-bottom: 9px solid red;
}
.category-weekly {
border: 1px solid black;
border-bottom: 9px solid yellow;
}
.bbottom{
padding-bottom: 9px;
border-bottom: 9px solid yellow;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class='category-daily category-weekly'>
</div>
<br>
<div class='category-daily'>
</div>
<br>
<div class='category-weekly'>
</div>This wraps a div with both classes with another div which contains the secondary border-bottom.
