functions - Can we have conditional CSS styling?

admin管理员组

文章数量:1387310

Can we apply css based on post category. For example I have below css

.question-content-text{font-size: 16px;}

This is applicable to all posts, my requirement is to have different css based on post category as follows

If (post_category_id = 1 ) then this css .question-content-text{font-size: 16px;} 
If (post_category_id = 2 ) then this css .question-content-text{font-size: 25px;}
IF (post_category_id not in (1, 2)  ) then this css .question-content-text{font-size: 50px;}

If its possible, Could you please help me to get this within my child theme

Can we apply css based on post category. For example I have below css

.question-content-text{font-size: 16px;}

This is applicable to all posts, my requirement is to have different css based on post category as follows

If (post_category_id = 1 ) then this css .question-content-text{font-size: 16px;} 
If (post_category_id = 2 ) then this css .question-content-text{font-size: 25px;}
IF (post_category_id not in (1, 2)  ) then this css .question-content-text{font-size: 50px;}

If its possible, Could you please help me to get this within my child theme

• functions
• css

Share Improve this question asked Apr 15, 2020 at 13:53 Avinash PatelAvinash Patel 3988 bronze badges 4

• This totally depends on your theme. For example the Twenty Twenty theme has the category-<your-category> class added. – Tobias Commented Apr 15, 2020 at 13:57
• thanks @Tobias but can we achieve this if the theme doesn't have this already? – Avinash Patel Commented Apr 15, 2020 at 14:20
• What's your theme? – Tobias Commented Apr 15, 2020 at 17:40
• hi @Tobias its discy theme. – Avinash Patel Commented Apr 16, 2020 at 6:04

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Looks like the Discy theme also has the category in the classes like shown in the screenshot:

Simply add your styles to the class.

Example:

.question-category-language {
    font-size: 16px;
}

.question-category-analytics {
    font-size: 25px;
}

本文标签： functionsCan we have conditional CSS styling