Referenced from CSS Dinner.
Hava fun with it!

Type Selector

Select the element by their type.

A

Selects all elements of type A.Type refer to the type of tag.So
<div>,<p>,<ul> are all different element types.

Examples

p selects all <p> elements.

ID Selector

Select the element with an ID.

#id

Selects the element with a specific id.You can also combine the id
selector with the type selector.

Examples

#cool selects any element with id = "cool".

Descendant Selector

Select an element inside another element.

A B

Selects all B inside A.B is called a descendant because it is
inside another element.

Examples

#fancy span selects any span elements that are inside the element
with id = "fancy".

Class Selector

Select the elements by their class.

.classname

Selects all elements with that class attribute.Elements can only hav
one id,but many classes.

Examples

.fruit selects all elements with class = "fruit".

Comma Combinator

Combine,selectors with …commas!

A, B

Selects all A and B elements.You can combine any selectors this
way,and you can specify more than two.

Examples

p, .fun selects all p elements as well as all elements with
class ="fun".

The Universal Selector

You can select everything.

*

You can select all elements with the universal selector.

Examples

p * selects any elements inside all <p> elements.

Adjacent Sibling Selector

Selects an element that directly follow another elements.

A + B

This selects all B elements that directly follow A.Elements
that follow one another are called siblings.They are the same lever
or depth.

Examples

p + .intro selects every element with class="intor" that
directly follow a <p>.

General Sibling Selector

Select elements that follows another element.

A ~ B

You can select all siblings of an element that follow it.This is
like the Adjacent Sibling Selector(A + B) except it gets all the
following element instead of one.

Examples

A ~ B selects all B elements that follow a A.

Child Selector

Select direct child of an element.

A > B

You can select elements thar are direct children of other elements.
A child element is any element that is nested directly in another
element.

Elements that are nested deeper than that are called descendant
elements.

Examples

A > B selects all B that are direct children A.

Pseudo Selector

• Firsht Child Pseudo-selector

  Select a first child element inside another element.

  :first-child

  You can select the first child element.A child element is any
  element that is directly nested in another element.You can combine
  this pseudo-selector with other selectors.

  Examples
  p:first-child selects all first child <p> elements.

• Only Child Pseudo-selector

  Select an element that are the only child element inside another
  one.

  :only-child

  You can select any element that is the only element inside another
  one.

  Examples

  span:only-child selects the <span> elements that are the only
  one child of some other element.

• Last child Pseudo-selector

  Select the last element inside another element.

  :last-child

  You can use this selector to select an element that is the last
  child inside another element.

  Tip -> In cases where there is only one element,that element counts
  as the first-child,only-child and last-child.

  Examples

  :last-child selects all last-child elements.

• Nth child Pseudo-selector

  Select an element by its order in another element.

  nth-child(A)

  Selects the nth(Ex:1st,2nd,3rd etc.)child element in another element.

  Examples

  div p:nth-child(2) selects the second p in every div.

• Nth Last Child Selector

  Select an element by its order in another element,counting
  from back.

  nth-last-child(A)

  Selects the children from the bottom of the parent.This is like
  nth-child,but counting from the back.

  Examples

  :nth-last-child(2) selects all second-to-last child elements.

• First of Type Selector

  Select first element of a specific type.

  :first-of-type

  Selects the first elements of that type within another element.

  Examples

  span:first-of-type selects the first <span> in any element.

• Nth of type Selector

  nth-of-type(A)

  Selects a specific element based on its type and order in another
  element.

  Examples

  .example:nth-of-type(odd) selects all odd instances of the example classes.

• Nth-of-type Selector with Formula

  nth-of-type(An+B)

  The nth-of-type formula selects every nth element,starting the count
  at a specific instance of the element.

  Examples

  span:nth-of-type(6n+2) selects every 6th instance of a <span>,starting
  from(and including) the second instance.

• Only of Type Selector

  Select elements that are the only ones of their type with of
  their parent element.

  :only-of-type

  Selects the only element of its type within another element.

  Examples

  p span:only-of-type selects a <span> within any <p> if it is
  the only <span> in there.

• Last of Type Selector

  Select the last element of a specific type

  :last-of-type

  Selects each last element of that type within another element.
  Type refers to the kind of tag,so <p> and <span> are different
  types.

  Examples

  div:last-of-type selects the last <div> in every element.

• Empty Selector

  Select elements that don’t have children

  :empty

  Selects elements that don’t have any other elements inside them.

  Examples

  div:empty selects all empty <div> elements.

• Negation Pseudo-class

  Select all elements that don’t match the negation selector

  :not(X)

  You can use this to select all element that do not match selector "X"

  Examples

  div:not(:first-child) selects every <div> that is not a first
  child.

Attribute Selector

Select all elements that have a specific attribute.

• [attribute]

  Attributes appear inside the opening tag of an element,like this
  <span attribute="value" .An attribute don’t always have a value,
  it can be blank.

  Examples

  [type] selects all elements that have a type="anything" attribute.

• A[attribute]

  Combine the attribute selector with another selector (like the tag name selector)
  by adding it to the end.

  Examples

  a[href] selects all elements that have a href="anything" attribute.

Attribute Value Selector

Select all element that have a specific attribute value

[attribute="value"]

Attribute selectors are case-sensitive,each character must match
exactly.

Examples

input[type="checkbox"] selects all checkbox input elements.

Attribute Starts With Selector

Select all elements with an attribute value that start with
specific value.

[attribute ^= "value"]

Examples

.toy[category^="Swim"] selects elements with class toy and
either category="Swimwear" or category="Swimming".

Attribute Ends With Selector

Select all elements with an attribute value that ends with
specific value.

[attribute $= "value"]

Examples

img[src$=".jpg"] selects all images display a .jpg image.

Attribute Wildcard Selector

Select all elements with an attribute value that contains
specific characters anywhere.

[attribute *= "value"]

A useful selector if you can identify a common patter in things like
class,href or src attributes.

Examples

img[src*="/image/"] selects all images that show images from the
“image” folder.

JSON Path

JSONPath is a query language used to navigate and extract data from JSON documents.

Operators

Functions

Functions can be invoked at the tail end of a path - the input to a function is the output of the path expression.
The function output is dictated by the function itself.

Filter Operators

Filters are logical expressions used to filter arrays. A typical filter would be [?(@.age > 18)] where @ represents the current item being processed. More complex filters can be created with logical operators && and ||. String literals must be enclosed by single or double quotes ([?(@.color == 'blue')] or [?(@.color == "blue")]).

Path Examples

Given the json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

{
    "store": {
        "book": [
            {
                "category": "reference",
                "author": "Nigel Rees",
                "title": "Sayings of the Century",
                "price": 8.95
            },
            {
                "category": "fiction",
                "author": "Evelyn Waugh",
                "title": "Sword of Honour",
                "price": 12.99
            },
            {
                "category": "fiction",
                "author": "Herman Melville",
                "title": "Moby Dick",
                "isbn": "0-553-21311-3",
                "price": 8.99
            },
            {
                "category": "fiction",
                "author": "J. R. R. Tolkien",
                "title": "The Lord of the Rings",
                "isbn": "0-395-19395-8",
                "price": 22.99
            }
        ],
        "bicycle": {
            "color": "red",
            "price": 19.95
        }
    },
    "expensive": 10
}

JQ

JQ is a lightweight and flexible command-line tool for processing and manipulating JSON data.

• JQ Playground
• JQ Manual

Basic filters.

Identity: .

The absolute simplest filter is . . This filter takes its input and produces the same value as output. That is, this is the identity operator.

Object Identifier-Index: .foo, .foo.bar

The simplest useful filter has the form .foo.A filter of the form .foo.bar is equivalent to .foo | .bar.

Optional Object Identifier-Index: .foo?

Just like .foo, but does not output an error when . is not an object.

Object Index:.[<string>]

You can also look up fields of an object using syntax like .["foo"].

Array Index: .[<number>]

When the index value is an integer, .[<number>] can index arrays.Arrays are zero-based.

Array/String Slice: .[<number>:<number>]

The .[<number>:<number>] syntax can be used to return a subarray of an array or substring of a string.(Start inclusive and End Exclusive)

Array/Object Value Iterator: .[]

If you use the .[index] syntax, but omit the index entirely, it will return all of the elements of an array. .[]?,Like .[], but no errors will be output if . is not an array or object.

Comma: ,

If two filters are separated by a comma, then the same input will be fed into both and the two filters’ output value streams will be concatenated in order: first, all of the outputs produced by the left expression, and then all of the outputs produced by the right.

Pipe: |

The | operator combines two filters by feeding the output(s) of the one on the left into the input of the one on the right. It’s similar to the Unix shell’s pipe.

Types and Values

jq supports the same set of datatypes as JSON - numbers, strings, booleans, arrays, objects (which in JSON-speak are hashes with only string keys), and "null".

Array construction: []

As in JSON, [] is used to construct arrays.

Object Construction: {}

Like JSON, {} is for constructing objects (aka dictionaries or hashes), as in: {“a”: 42, “b”: 17}.

Recursive Descent: ..

Recursively descends ., producing every value.This is the same as the zero-argument recurse builtin (see below).

Builtin operators and functions

Some jq operators (for instance, +) do different things depending on the type of their arguments.

Addition: +

The operator + takes two filters, applies them both to the same input, and adds the results together.

• Numbers are added by normal arithmetic.
• Arrays are added by being concatenated into a larger array.
• Strings are added by being `joined into a larger string.
• Objects are added by merging, that is, inserting all the key-value pairs from both objects into a single combined object. If both objects contain a value for the same key, the object on the right of the + wins`. (For recursive merge use the * operator.)
• null can be added to any value, and returns the other value unchanged.

Subtraction: -

As well as normal arithmetic subtraction on numbers, the - operator can be used on arrays to remove all occurrences of the second array’s elements from the first array.

Multiplication, division, modulo: *, /, %

These infix operators behave as expected when given two numbers. Division by zero raises an error. x % y computes x modulo y.
Multiplying a string by a number produces the concatenation of that string that many times. “x” * 0 produces "".
Dividing a string by another splits the first using the second as separators.
Multiplying two objects will merge them recursively.

abs

The builtin function abs is defined naively as: if . < 0 then - . else . end.

length

The builtin function length gets the length of various different types of value:

• The length of a string is the number of Unicode codepoints it contains (which will be the same as its JSON-encoded length in bytes if it’s pure ASCII).
• The length of a number is its absolute value.
• The length of an array is the number of elements.
• The length of an object is the number of key-value pairs.
• The length of null is zero.
• It is an error to use length on a boolean.

has(key)

The builtin function has returns whether the input object has the given key, or the input array has an element at the given index.

in

The builtin function in returns whether or not the input key is in the given object, or the input index corresponds to an element in the given array. It is, essentially, an inversed version of has.

map(f), map_values(f)

For any filter f, map(f) and map_values(f) apply f to each of the values in the input array or object, that is, to the values of .[].

select(boolean_expression)

The function select(f) produces its input unchanged if f returns true for that input, and produces no output otherwise.
It’s useful for filtering lists: [1,2,3] | map(select(. >= 2)) will give you [2,3].

test(val), test(regex; flags)

Like match, but does not return match objects, only true or false for whether or not the regex matches the input.

match(val), match(regex; flags)

match outputs an object for each match it finds. Matches have the following fields:

• offset - offset in UTF-8 codepoints from the beginning of the input
• length - length in UTF-8 codepoints of the match
• string - the string that it matched
• captures - an array of objects representing capturing groups.

Capturing group objects have the following fields:

• offset - offset in UTF-8 codepoints from the beginning of the input
• length - length in UTF-8 codepoints of this capturing group
• string - the string that was captured
• name - the name of the capturing group (or null if it was unnamed)

capture(val), capture(regex; flags)

Collects the named captures in a JSON object, with the name of each capture as the key, and the matched string as the corresponding value.