How to get an Element Starting with Class Name: the * and ^ JavaScript Selectors

You certainly know * and ^ as selectors in different programming languages. But you may have found some surprising (or frustrating) results while using them as JavaScript or jQuery selectors.

Let’s say you want to access elements starting with a certain class name, for example, “fruit-“ in the following code:

<div class="basket-item fruit-apple">🍏</div>

First, the syntax

Your first reflex may be to try something like that:

// Incorrect syntax
$('.^fruit-').doSomething(...) // Nope, that won't work...

The correct syntax is:

// Correct syntax

Then, the selectors: ^ vs *

Using the ^ selector is correct, but its behavior is a bit too literal: it will get the very first element starting with the class name, or more specifically, the class starting with the selected name.

// will match <div class="fruit-strawberry basket-item">🍓</div>

// won't match <div class="basket-item fruit-apple">🍏</div>

To match a class name starting with “fruit-“ anywhere in the class string, you will need to use the * selector:

// will match <div class="vegetable-carrot basket-item">🥕</div>

// will also match <div class="basket-item vegetable-potato">🥔</div>

Here is a full example to play with on CodePen:

I hope you found it useful.
Happy Coding !

Clever CSS Spacing Between Elements with + Selector

Let’s say you have a list of elements, and you want to elegantly add a bit of space between them so that they don’t appear too clumped together… Well, it’s pretty easy if you have the right tool: the + CSS selector! You don’t need to use a margin or padding on each element and add a first-item or last-item class to remove the extra spacing, the + selector takes care of everything. How does it work ? Let’s take an example: if you have div + p in your CSS, it will select the first <p> element that is … Continue reading Clever CSS Spacing Between Elements with + Selector

HTC Vive and Unity – Absolute Beginner Resources

If you want to develop a game or a VR experience on the HTC Vive, you are not familiar with Unity and don’t know where to begin? This article is for you! Check out my absolute beginner resources! Hello World! As web and mobile developer, I am used to the “Hello World” tutorials, you know, the ones that make you proud of being able those two simple words on a new interface. So, I was looking for an equivalent in VR and I found it: Hello World! Getting Started With VR Dev (Unity + Vive) by Level 2 Lab. It … Continue reading HTC Vive and Unity – Absolute Beginner Resources

Pokémon GO isn’t dead yet – a game design analysis

No, Pokémon go isn’t dead yet. Statistically speaking, you probably have installed the game last summer, played a few days, or even weeks, passed a few levels, and stopped. But because you are not playing anymore doesn’t mean that the game is dead. In fact, it is very much alive and still evolving, as I will explain in a second, and the Pokémon GO community is very active too. By the way, you know that Gen 2 Pokémons are there, don’t you? It is true there have been ups and downs in the game, and especially a few weeks/months out … Continue reading Pokémon GO isn’t dead yet – a game design analysis

The Best VR Headsets for a Complete Immersion

2016 has been a crazy year for VR: public release of dedicated VR headsets, creation of new types of games and experiences, and many more things to come. In the tech literature today, we often see “What’s the best VR headset” or “What VR headset should you buy” articles. I wanted to do something slightly different here and focus on the immersion the virtual headsets can provide, because to me, it is their main purpose. The immersion is not up to the game or VR experience only, the headset actually plays a big part in making you feel that what … Continue reading The Best VR Headsets for a Complete Immersion