What is CSS Selectors?

What is CSS Selectors - basic describeCSS Selectors are patterns that match tags and attributes to the HTML markup itself. Many are fundamental to the CSS core, the Sizzle.js engine under $() provides extends selectors with more advanced features and capabilities.

Selectors also represent the WHERE clause of the SQL analogy, so we need to understand their capabilities and also consider that poorly written jQuery can affect browser performance.


Table of contents[Show]


Once you understand selectors, you understand jQuery. If you can identify the page elements you want to change, you can apply any of a diverse set of functions to it. It will be like riding a bike—once you know how, you want to go exploring.

View Tip

 

Tags, IDs, and Classes

The sample page offers two options to locate the h1 tag. All HTML tags can be identified by name, and hierarchy can be signified within the selector. Any h1 tags within a bodynode would be returned using the following:

$(’body h1’)

The other option is to use the element’s ID attribute to uniquely identify a page element. For example, you can identify a specific element referring to the ID using the # symbol:

$(’#demo1’)

Classes are identified with the format tag.class. The class can be identified by itself with the .coolCat dot notation. However, to aid performance in many cases, it’s recommended to precede it with the HTML tag that would have that class. This selector locates any list items with the coolCat class.

li.coolCat

 Tip  ID and class selectors are case sensitive, as per the string comparisons in the SQL. Tags, however, tolerate either case.

 

Attributes and Operator

It’s possibly to identify elements by other attributes. A common example I use in APEX is to look in a report identified with the id p2_emps and locate any cells for the ENAME column:

#p2_emps td[headers=’ENAME’]

This translates to the HTML typically generated for APEX classic report data columns:

<td headers="ENAME">

The earlier example of h1#demo1 could also be written in a similar way, but classes and IDs have their own identifiers so the shortened form can be used instead:

h1[id="demo1"]

Searching for attribute values becomes more flexible with operator extensions similar to % and _ wildcards in SQL. The tilde in the following example looks for attributes beginning with the string "DATE". As a result, the invocation of jQuery targets APEX columns such as DATE_CALLED, DATE_MODIFIED, and so forth:

td[headers^="DATE"]

 

Pseudo-Selectors

Pseudo-selectors are used to identify information that is not in the document tree. A common example you may have seen is:hover, typically applied on an anchor tag in the form a:hover.

Examples specific to jQuery include tr:even, to get all the even tr elements; or :contains(’wesley’), to return all those elements containing my name as text. Specific siblings such as list items in an unordered list can be identified positionally like an array:

 

$("ul li:eq(1)")

 Tip  Web sites such as caniuse.com help determine why certain CSS or HTML tags are not recognized in your browser. IE has a history of lagging behind in support due to longer release cycles.

 

Browser Feedback

You can ask your browser to provide immediate feedback as to how accurate your selectors are by opening the browser’s Developer Tools JavaScript console. Do that by pressing Ctrl-Shift-J or F12, through the browser menu, or via Inspect Element when right-clicking within the page. Figure 1 shows the sample page with the Developer Tools docked to the bottom with the console tab shown. I manually entered $(‘h1’) and the console returned the array of results.

 Chrome JavaScript console window

Figure 1. Chrome JavaScript console window

Вас заинтересует / Intresting for you:

Understanding the CSS Selector
Understanding the CSS Selector 1844 views Игорь Воронов Wed, 18 Sep 2019, 12:39:02
CSS: Flex Container Properties...
CSS: Flex Container Properties... 56 views Боба Sat, 09 Nov 2019, 07:41:19
WordPress optimization: minimu...
WordPress optimization: minimu... 78 views Fortan Wed, 13 Nov 2019, 12:45:25
JavaScript for game designer: ...
JavaScript for game designer: ... 177 views Antoni Tue, 27 Nov 2018, 14:28:10

Comments on What is CSS Selectors?

Be the first to comment
Please login to comment