Sign in
Help Center caret caret
  • en caret caret
Black friday Black friday Black friday Cyber monday Cyber monday Cyber monday
Up to 70% off Up to 70% off
Grab Yours

CSS selectors in wpDataTables

Contents

What is a CSS Selector?

In CSS, selectors serve as the navigational tools to pinpoint specific elements within a website for styling. For instance, if you aim to have all primary headings in red font, you’d utilize the h1 selector (HTML’s indicator for top-level headings). Subsequently, you specify the property you wish to alter (like color) and assign it a specific value (like red). Thus, the CSS code would appear as follows:

h1 {
    color: red;
}

To enhance clarity and adhere to standards, CSS code conventionally adopts this structured format:
Alternatively, you can tailor CSS styles for individual tables by accessing the “Customize” tab within the table settings. Here, you have the flexibility to insert custom CSS specific to each table. Unlike the global CSS applied through the main settings, this custom CSS will solely affect the appearance of the designated table, allowing for precise customization tailored to its unique requirements.

Using built-in CSS IDs in wpDataTables

  • Simple tables
    • #wpdtSimpleTable-{ID}: Used on every table HTML tag for Simple tables only ({ID} – should be changed with exact table id, if the id is 1 e.g. #wpdtSimpleTable-1 )
  • Data tables
    • #table_{dynamic-page-ID}_wrapper: Used on every div around table HTML tag for Data tables only ({dynamic-page-ID} – dynamic created id’s depends on how many data tables you have on the page, if you have 1 then it is 1 e.g. #table_1_wrapper, if you have three tables then you will have ids: first table 1 (#table_1_wrapper) and second table will have 3 (#table_3_wrapper) and the third table will have number 5 (#table_5_wrapper) etc…)
    • #table_{dynamic-page-ID}_length: Used on every div for table display length above table HTML tag for Data tables only ({dynamic-page-ID} – dynamically created ids depends on how many data tables you have on the page if you have 1 then it is 1 e.g. #table_1_length, if you have three tables then you will have ids: first table 1 (#table_1_length) and second table will have 3 (#table_3_length) and the third table will have number 5 (#table_5_length) etc…)
    • #table_{dynamic-page-ID}_filter: Used on every div for table global search above table HTML tag for Data tables only ({dynamic-page-ID} – dynamic created id’s depends how many data tables you have on page if you have 1 then it is 1 e.g. #table_1_filter, if you have three tables then you will have ids: first table 1 (#table_1_filter) and second table will have 3 (#table_3_filter) and third table will have number 5 (#table_5_filter) etc…)
    • #table_{dynamic-page-ID}: Used on every table HTML tag for Data tables only ({dynamic-page-ID} – dynamically created ids depend on how many data tables you have on the page if you have 1 then it is 1 e.g. #table_1, if you have three tables then you will have ids: first table 1 (#table_1) and second table will have 3 (#table_3) and the third table will have number 5 (#table_5) etc…)
    • #table_{dynamic-page-ID}_info: Used on every div for table info under table HTML tag for Data tables only ({dynamic-page-ID} – dynamic created id’s depends on how many data tables you have on the page, if you have 1 then it is 1 e.g. #table_1_info, if you have three tables then you will have ids: first table 1 (#table_1_info) and second table will have 3 (#table_3_info) and the third table will have number 5 (#table_5_info) etc…)
    • #table_{dynamic-page-ID}_paginate: Used on every div for table pagination under table HTML tag for Data tables only ({dynamic-page-ID} – dynamic created id’s depends on how many data tables you have on page, if you have 1 then it is 1 e.g. #table_1_paginate, if you have three tables then you will have ids: first table 1 (#table_1_paginate) and second table will have 3 (#table_3_paginate) and third table will have number 5 (#table_5_paginate) etc…)

Using built-in CSS classes in wpDataTables

  • .wpdt-c: Used on every table in plugin as main wrapper.(wrap all elements for wpdatatable)
  • .wpDataTables: Used on every table in the plugin as a table wrapper.
  • .wpDataTablesWrapper: Used on every table in the plugin as a table wrapper. 
    /* Change background of the table wrapper*/
.wpDataTables.wpDataTablesWrapper {
    background: red !important;
}
  • .wpDataTable: Used on every table in the plugin in a table HTML element.
  • Simple tables
    • .wpdtSimpleTable: Additional class on table HTML tag for Simple tables only.
    • .wpdt-cell-row: Row class on every tr HTML tag for Simple tables only.
    • .wpdt-cell: Cell class on every td HTML tag for Simple tables only.
  • Data tables
    • .wdt-skin-{skin-name}: Used on the same global wrapper with class .wpdt-c ({skin-name} – is the name of the skin that is chosen on Global main settings for skin or on Custom table settings for skin – available skins: (light, material, graphite, aqua, raspberry-cream, purple, dark, mojito, dark-mojito ), if the skin is aqua e.g. .wdt-skin-aqua).
    • .dt-buttons: Used on wrapper div around dataTable buttons on every data table that uses Table tools above table HTML tag for Data tables only.
    • .dt-button: Used on every button in dataTable buttons on every data table that uses Table tools above table HTML tag for Data tables only.
    • DTTT_button_colvis
    • .DTTT_button_{button-type}: Used on the specific button in dataTable buttons based on type ({button-type} – can be for Table tools: print, colvis, csv, pdf, excel and copy, for Editing: edit, delete, new, duplicate; if is used collection then wrapper buttons will have classes: buttons-excel, buttons-csv, buttons-copy and buttons-pdf;) should be used on every data table that use Table tools above the table HTML tag for Data tables only.
    • .dataTables_length: Used on every div for table display length above the table HTML tag for Data tables only.
    • .dataTables_filter: Used on every div for table global search above the table HTML tag for Data tables only.
    • .wpDataTableID-{ID}: Used on every table HTML tag for Data tables only ({ID} – should be changed with exact table id, if the id is 1 e.g. .wpDataTableID-1 ).
    • .dataTables_info: Used on every div for table info under the table HTML tag for Data tables only.
    • .dataTables_paginate: Used on every div for table pagination under the table HTML tag for Data tables only.