Using Developer Tools to Inspect CSS Classes and IDs

🚧
Coming Soon! We're putting the finishing touches on this feature

Overview

Browser developer tools are essential for identifying CSS classes and IDs in your Knack applications. This guide provides step-by-step instructions for using developer tools to inspect elements, understand the HTML structure, and identify the correct selectors for your custom CSS.

Developer tools help you understand exactly how elements are structured and what classes are available for styling.

Note: The examples in this guide are illustrative. Actual class names, HTML structure, and element relationships may vary in your specific Knack application. Always use developer tools to inspect your actual application structure.

Getting Started

Opening Developer Tools

Chrome/Edge:

Right-click on any element and select Inspect
Press F12 or Ctrl+Shift+I (Windows) / Cmd+Option+I (Mac)
Go to Menu → More Tools → Developer Tools

Firefox:

Right-click on any element and select Inspect Element
Press F12 or Ctrl+Shift+I (Windows) / Cmd+Option+I (Mac)
Go to Menu → Web Developer → Inspector

Safari:

First enable developer tools: Safari → Preferences → Advanced → Show Develop menu
Right-click and select Inspect Element
Press Cmd+Option+I

Understanding the Interface

The developer tools interface has several key areas:

Elements Panel: Shows the HTML structure and allows you to inspect individual elements
Styles Panel: Displays CSS rules applied to the selected element
Console: For testing and debugging (useful for future JavaScript work)

Inspecting Elements

Using the Element Selector

Click the Inspector Icon: Look for the cursor/arrow icon in the top-left of the developer tools
Hover Over Elements: Move your cursor over elements in your app to see them highlighted
Click to Select: Click on the element you want to inspect

Tip: The inspector will show you the element's position in the HTML structure and highlight it both in the code and on the page.

Reading the HTML Structure

When you select an element, you'll see its HTML structure in the Elements panel:

<div class="kn-form-view" id="view_123">
  <div class="kn-form-view-column">
    <label>Field Name</label>
    <input type="text">
    <!-- Note: Use developer tools to identify actual input classes in your forms -->
  </div>
</div>

Key Information to Look For:

Class Names: Listed in the class attribute (e.g., kn-form-view)
IDs: Listed in the id attribute (e.g., view_123)
Element Type: The HTML tag name (e.g., div, form, button)
Parent/Child Relationships: How elements are nested

Next-Gen Classes

Next-Gen Apps use consistent naming patterns that make identification easier:

Common Patterns:

All classes start with kn-
View classes end with -view (e.g., kn-form-view, kn-list-view)
Navigation classes start with kn-main-nav-
Page elements start with kn-page-

Examples of What You'll Find:

<!-- Navigation -->
<nav class="kn-main-nav">
  <button class="kn-main-nav-item">Home</button>
</nav>

<!-- Page Content -->
<main class="kn-page">
  <h1 class="kn-page-title">Page Title</h1>
  <section class="kn-page-section">
    <div class="kn-form-view" id="view_456">
      <!-- View content -->
    </div>
  </section>
</main>

Identifying Specific Elements

Forms and Form Elements

To style forms, look for these classes:

<form class="kn-form-view">
  <div class="kn-form-view-column">
    <!-- Form fields -->
  </div>
</form>

CSS Targeting:

.kn-page .kn-form-view {
  /* Style the entire form - using higher specificity */
}

.kn-page .kn-form-view-column {
  /* Style form columns - using higher specificity */
}

Views and Data Display

Different view types have specific classes:

<!-- List View -->
<div class="kn-list-view" id="view_789">
  <div class="kn-list-view-column">
    <!-- List content -->
  </div>
</div>

<!-- Table View -->
<table class="kn-table-view">
  <!-- Table content -->
</table>

<!-- Chart View -->
<div class="kn-pie-chart-view">
  <!-- Chart content -->
</div>

Navigation Elements

Navigation uses semantic HTML with specific classes:

<header class="kn-header">
  <nav class="kn-main-nav">
    <button class="kn-main-nav-item">Menu Item</button>
    <button class="kn-main-nav-toggle">☰</button>
  </nav>
</header>

Using the Styles Panel

Viewing Applied Styles

When you select an element, the Styles panel shows:

Computed Styles: The final styles applied to the element
CSS Rules: All CSS rules affecting the element, organized by source
Inherited Styles: Styles inherited from parent elements

Testing CSS Changes

You can test CSS changes directly in the developer tools:

Select an Element
Find the Styles Panel
Add New Rules (click the + icon)
Edit Existing Rules
See Changes Live

Example Testing Process:

.kn-page .kn-form-view {
  /* styles - using higher specificity */
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
}

Note: Changes made in developer tools are temporary and will disappear when you refresh the page. Copy successful changes to your actual CSS file.

Finding View IDs

Understanding View IDs

Each view in Knack has a unique ID.

<div class="kn-form-view" id="view_123">

Using View IDs for Specific Targeting

/* Target all form views */
.kn-page .kn-form-view {
  /* styles - using higher specificity */
}

/* Target only view_123 */
#view_123 {
  /* styles */
}

/* Combine class and ID for specificity */
.kn-form-view#view_123 {
  /* styles */
}

Common Inspection Tasks

Finding the Right Selector

Inspect the Element
Check the Classes
Note the Structure
Test Your Selector in the Styles Panel

Identifying Parent-Child Relationships

Understanding the HTML structure helps you write better CSS.

<div class="kn-page-container">
  <main class="kn-page">
    <section class="kn-page-section">
      <div class="kn-form-view" id="view_123">
        <div class="kn-form-view-column">
          <!-- Content -->
        </div>
      </div>
    </section>
  </main>
</div>

CSS Targeting Options:

/* Target all form views */
.kn-page .kn-form-view { }

/* Target form views within page sections */
.kn-page-section .kn-form-view { }

/* Target specific form view */
#view_123 { }

/* Target columns within specific form view */
#view_123 .kn-form-view-column { }

Checking Responsive Behavior

Use developer tools to test how your styles work on different screen sizes:

Open Device Toolbar: Click the device icon or press Ctrl+Shift+M
Select Device Size: Choose from preset devices or set custom dimensions
Test Your Styles: See how your CSS responds to different screen sizes

Troubleshooting Tips

Element Not Found

Refresh the page and try again
Check if the element is hidden or only appears under certain conditions
Look for similar elements that might have the same class
Search the HTML using Ctrl+F in the Elements panel

Styles Not Applying

Check specificity: More specific selectors override less specific ones
Look for typos: Ensure class names are spelled correctly
Check the cascade: Later rules override earlier ones
Verify the selector: Make sure you're targeting the right element

Finding Mobile-Specific Elements

Some elements only appear on mobile:

<!-- Desktop navigation -->
<nav class="kn-main-nav">

<!-- Mobile navigation -->
<div class="kn-main-nav-mobile-container">
  <div class="kn-main-nav-mobile">

Note: These classes are available for mobile navigation. Use developer tools to see how they behave in your specific application.

Use the device toolbar to switch to mobile view and inspect mobile-specific elements.

Best Practices

Efficient Inspection Workflow

Start with the element you want to style
Work your way up the HTML structure to understand context
Note all relevant classes and IDs
Test your CSS in the Styles panel first
Copy successful styles to your CSS file

Documentation

Create a reference document with common selectors
Note the purpose of each class or ID
Document any patterns you discover

Staying Organized

Use consistent naming in your custom CSS
Group related styles together
Comment your CSS to explain complex selectors

This systematic approach to using developer tools will help you efficiently identify the right CSS classes and IDs for customizing your Next-Gen Apps, making your development process faster and more reliable.