> For the complete documentation index, see [llms.txt](https://jscula.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jscula.gitbook.io/docs/selectors/selector.md).

# Selector

Jscula provides a simple, expressive way to query and manipulate HTML elements using familiar CSS selector syntax.

Basic syntax is:

*<mark style="color:green;">`$('valid_css_selector')`</mark>*

* A selector should begin with <mark style="color:orange;">`$`</mark> sign
* A (*selector*) to "query (or find)" HTML elements
* An *action*() to be performed on the element(s)

**Examples:**

`$("p").hide()` - hides a \<p> element.

`$(".test").hide()` - hides an element with class="test".

`$("#test").hide()` - hides the element with id="test".

`$('#button').remove();` - removes the button

`$('.myParagragh').text("Hello World")` - Writes the text 'Hello World into the selected element'

## Selecting multiple elements

<mark style="color:green;">`$(".button*")`</mark> — Selects all the elements with class of .button

Or pass a second argument to the selector with `true`:

`$(".button",true)` — Selects all the elements with class of .button

{% hint style="warning" %}
*<mark style="color:orange;background-color:yellow;">Without an asterisk \* in front, it will always return only one element</mark>*
{% endhint %}

`$(".button")` — Selects only an element with the class of .button

## More Examples

You can use your CSS selectors.

| Syntax                       | Description                                                                    |
| ---------------------------- | ------------------------------------------------------------------------------ |
| $("p.intro")                 | <p>Selects all</p><p>elements with class="intro"</p>                           |
| $("ul li:first")             | Selects the first \<li> element of the first \<ul>                             |
| $("ul li:first-child")       | Selects the first \<li> element of every \<ul>                                 |
| $("\[href]")                 | Selects an element with the href attribute                                     |
| $("a\[target='\_blank']\*")  | Selects all \<a> elements with a target attribute value equal to "\_blank"     |
| $("a\[target!='\_blank']\*") | Selects all \<a> elements with a target attribute value NOT equal to "\_blank" |
| $("#button")                 | Selects an element with the ID of button                                       |

In next project feel to Replace `document.querySelector('')` with `$('')`

You can use **J**scula selector with your regular JavaScript codes:

{% code lineNumbers="true" %}

```javascript
$('input').value;
$('main > div*').classList.add('active'); //adds class of active to all the matched element
```

{% endcode %}