Oracle JET Selectors

Oracle JET provides component and pattern selectors that you can use to apply styling to an Oracle JET component or pattern. The framework also provides selectors to use instead of CSS3 and CSS4 pseudo classes that apply the same style on any DOM element.

Component and Pattern Selectors

Component and pattern selector names use lower case and follow the naming convention: .oj-[widgetname]-[element-name].

The following list describes the naming convention in greater detail:

  • oj: Oracle JET classes use the reserved oj namespace prefix.

  • widgetname: Component or pattern names are one word and lower case, such as datagrid.

  • element-name: A widget’s element is hyphenated: header-cell-text.

For example, the following class applies to data grid header cell text: .oj-datagrid-header-cell-text. To reference this selector, add it to the HTML and omit the leading period.

<!-- ko if: $key=='FIRST_NAME' -->            
        <span class="oj-datagrid-header-cell-text" 
            data-bind="text: 'First Name'"></span>
<!-- /ko -->

Marker Classes

Oracle JET provides selectors that you can use instead of CSS3 and CSS4 pseudo classes. The advantage of using an Oracle JET selector is that you can specify the same style on any DOM element.

For example, you can use the oj-hover instead of the :hover pseudo class. The following table lists the Oracle JET marker classes and their CSS3 and jQuery UI equivalent.

Marker Type Oracle JET Marker Class CSS3 Inspiration jQuery UI Equivalent Description

Accessibility

oj-hicontrast

   

This marker is placed on the body tag by either a script or the application. For details, see Configuring High Contrast Mode.

Alignment

oj-right

oj-center

oj-left

oj-start

oj-end

   

Indicates the horizontal position, such as the tail of a popup.

Alignment

oj-top

oj-middle

oj-bottom

   

Indicates the vertical position, such as the tail of a popup.

Collapsible

oj-expanded

   

Used when something expandable is expanded.

Collapsible

oj-collapsed

   

Used when something expandable is collapsed, meaning that it's not expanded.

Component

oj-component

 

ui-widget

Marks the root DOM element of a widget.

Component

oj-component-initmode

   

Mark the init DOM element of a widget. This can be different than the root DOM element if the init node was wrapped by other DOM. For example, in an ojInputNumber component, the init node is an input element, but this is wrapped by other DOM when the component is created.

Input

oj-disabled

:disabled

   

Input

oj-enabled

:enabled

ui-state-default

 

Input

oj-read-only

     

Input

oj-invalid

     

Input

oj-warning

     

Input

oj-required

     

Input

oj-indeterminate

:indeterminate

   

Link

oj-visited

:visited

 

Applied when user visits the link or item.

User Action

oj-active

:active

ui-state-active

jQuery UI uses ui-state-active for both active and selected states.

Oracle JET provides separate styling markers for active and selected/checked/toggled states so that you can style these states separately.

User Action

oj-selected

 

ui-state-active

Used when something is selected, checked, or toggled on.

See previous explanation.

User Action

oj-hover

:hover

ui-state-hover

:hover works on any DOM element but only on the closest DOM element currently hovered over.

oj-hover can be placed on an element which is an ancestor of the element being hovered over. For example if you're hovered over an icon in a button, oj-hover may be placed on the button tag, which is the ancestor of the tag with the icon.

User Action

oj-focus

:focus

ui-state-focus

 

User Action

oj-focus-only

   

Used when something is focused, but you only want to set the style when oj-selected, oj-hover, oj-active are not set.

Visibility

oj-complete

   

Added to a DOM element when a composite component or page is ready for styling.

To prevent a flash of unstyled content before the component is ready, add the following to the component or page CSS:

component:not(.oj-complete) {
  visibility: hidden
}

Oracle JET also provides the following drag and drop marker classes that can be used instead of CSS4 pseudo classes.

Oracle JET Marker Class CSS4 Inspiration jQuery UI Equivalent Description

oj-draggable

   

Used on draggable elements.

oj-drag

   

Used on element when dragged.

oj-drop

:drop

 

Applies to all elements that are drop targets during a drag.

oj-active-drop

:drop (active)

 

Used on element that will receive the item currently being dragged.

oj-valid-drop

:drop (valid)

 

Used on elements that can receive the item currently being dragged.

oj-invalid-drop

:drop (invalid)

 

Used on elements that can't receive the item currently being dragged.

Internally, Oracle JET follows these rules for clickable elements:

Oracle JET Marker Class Used if Widget is Disabled or Read Only?

oj-enabled or oj-disabled or oj-readonly

oj-enabled: no

oj-selected

Yes

oj-active

No

oj-hover

No

oj-focus

No

oj-focus-only

No

oj-default

No

For additional information about the CSS3 selectors, see http://www.w3.org/TR/css3-selectors/. For more information about the CSS4 selectors, see http://dev.w3.org/csswg/selectors4/.