In Wordpress custom post type, custom classification was created and category slug was set.

<? php if (have_posts ()):
while (have_posts ()):
the_post ();?>

<? php the_title ();?>

    <? php $terms = get_the_terms ($post->ID, 'type');
    if (! is_wp_error ($terms)&&$terms):
    foreach ($terms as $term):
        <? php echo esc_html ($term->name);?></span>
    <? php endforeach;endif;?>

<? php endwhile;endif;?>

When verified, the span class had a slug that I set, such as label, product-design, and product-library. However, the following CSS does not work

. label {
    margin-right: 10px;
    padding: 3px 0 3px 0;
    font-size: 0.8em;
    line-height: 1.2;
    color: #ffffff;
.product-library {
    background-color: # 4f85f8;
.product-design {
    background-color: # 66b1f1;
.product-lunguage {
    background-color: # 012563;
  • Answer # 1

    Did you write it in an external file? Are you reading CSS?

    Is css read by looking at the browser source?

    I think css can be customized with theme options, etc. Have you tried it?

    If CSS is loaded,
    Is there any background color specified in span when css element verification is seen in chrome?

    Span may have been reset with something like reset.css, for example.

    If css is already specified,
    How about adding! important to css?


    . product-library {
        background-color: # 4f85f8! important;

    Or, if the selector is not hit, why not add a span tag to the specification?

    I thought css was not read.

    I think the language is English and language.