🔰selectors

CSS ⟩ CSS Rules ⟩ selectors

div          /* tag name selector: <div>            */
#nav         /* id selector      : id="nav"         */
.warning     /* class selector   : class="warning"  */

/* attribute selector */
p[lang="fr"]    /* <p lang="fr">             */
*[name="x"]     /* any element with name="x" */

body > h1:first-child  /* first <h1> direct child of <body> */

/* ------------ 親子關係 ------------ */

/* 不一定是直接的親子關係 */
ancestor descendant      /* op: space */

/* 直接子元素 */
parent > direct-child 

/* 直接子元素，但不是第一個(以下寫法效果都一樣) */
parent > direct-child + next-siblling    /* immediate sibling */
parent > :not(:first-child)
parent > :nth-child(n+2)    /* n = 0, 1, 2 ... */

/* 沒有子元素的元素(最底層) */
:not(:has(*))               /* :has() 為 CSS4 功能 */

/* ------------ 兄弟關係 ------------ */

/* (緊鄰著的)下一個兄弟(next sibling) */
brother + next-younger-brother

/* 後面的兄弟(following sibling) */
older ~ younger      /* 不必一定要緊接著的 */

span.fatal.error         /* <span class="fatal error"> */
span[lang="fr"].warning  /* <span lang="fr" class="warning"> */

The return value of querySelectorAll() is not an array of Element objects. Instead, it is an iterable array-like object known as a NodeList.

NodeList objects

have a length property, can be indexed like arrays.
can loop with traditional for( ; ; ) loop, for-of loop, forEach() method.
can convert into array with Array.from().

However, some older browsers have not implemented NodeList.forEach() nor Array.from(). This can be circumvented by using Array.prototype.forEach() — see this document's Example.

Previouscalc()Nextselect direct children by JS

Last updated 9 months ago

Was this helpful?