b:class Tag - Blogger Tags References

<b:class> Tag is used for adding a class attribute with value to its parent element. It is singleton tags and categorized as an instruction tag. b:class Tag can only add class to the parent element ( element in which it is placed ).

Syntax:

The syntax for b:class tag is as under.

<b:class cond='CONDITION' name='CLASS_NAME'/>

• CONDITION: It is the condition that will be checked to add class to the element.
• CLASS_NAME: It is the value that should be added as the class name.

Characteristics:

• The tag <b:class> works in all of the XML, except in the tag <b:skin>.
• Several tags <b:class> can be combined.
• Tags <b:class> cannot nest.

Attributes Used for <b:class> Tag:

There are several attributes that can be used for this tag that are listed under.

Attribute	Description	Strictness
name	It is the name of a class that should be added to the parent element. Expression ( expr: ) is also allowed. The Data Type Must be String.	Mandatory
cond	This attribute is used for the execution of any condition or expression to add class name. The value for the condition must be boolean ( true or false )	Optional

Examples:

These are some examples of using b:class Tag.

Adding Simple Class:

<div>
    <b:class name='section'/>
</div>

HTML Render:

<div class='section'>

</div>

Adding Class by condition:

<div>
    <b:class cond='data:view.isHomepage' name='homepage'/>
</div>

HTML Render:The class "homepage" will be added to div if its view is homepage otherwise no class will be added to the element.
If the page is the homepage.

<div class='homepage'>

</div>

If it is not the homepage.

<div>

</div>

Overwrite Existing Class:

To overwrite existing class we use <b:attr> Tag

<div class='section'>

  <b:attr name='class' value='header'/>

</div>

HTML Render:

<div class='header'>

</div>

To Add Multiple Classes:

To Add Multiple Classes we have to add multiple b:class tags like this.

<div class='section'>

  <b:class name='top'/>
  <b:class name='header'/>

</div>

HTML Render:

<div class='section top header'>

</div>

Set Class by Ternary Operator:

<div>

  <b:class expr:name='data:view.isHomepage ? "homefooter" : "footer"'/>

</div>

This condition with a ternary operator will be checked while executing the code. If the view is the homepage, as specified in the expression the class for div tag will be "homefooter" like this.

<div class='homefooter'>

</div>

If the result is false then the HTML Render will be like this.

<div class='footer'>

</div>

Conclusion:

That's all about b:class tag in blogger tags references.