Pour sélectionner les x premiers éléments en css il existe une méthode simple mais qui ne m’était jamais venu à l’idée jusqu’à ce matin :

:nth-child(-n + x){} // remplacez x par le nombre d'éléments désirés

Notez que si le parent contient moins d’éléments que désiré, les éléments présents seront tout de même ciblés.

kaelig:

TL;DR

CSS doesn’t allow us (yet) to scope our styles to a particular component in an HTML document (unless we use iframes…). We can try to circumvent this limitation by respecting the global CSS namespace.

We usually can safely set typography styles globally, but when it comes to form…

La combinaison des pseudos-classes :target et :checked et des sélecteurs adjacents (+ et ~) se révèlent très puissante. Elles nous permettent, de styler des éléments en fonction d’un état binaire et ont permis notamment l’apparition de menu déroulant ne nécessitant pas javascript pour fonctionner.

Après que l’on m’ait remonté quelques bugs sur certaines des combinaisons possibles, j’ai voulu faire un point sur celles-ci.
J’ai donc préparé une page visant à les tester et vous invite à vous y rendre avec différents navigateurs, différents os, différents appareils,… en multipliant donc au maximum les contextes (mais il va sans dire qu’un unique retour sera autant apprécié).

Edit :
La page de test : http://cahnory.fr/css/tests/checked-target.html 

Vous pouvez poster vos retours (succès comme échecs) dans les commentaires de cet article en n’oubliant pas de préciser le contexte pour chaque résultat.
Je compilerai ces résultats au fur et à mesure.

Une nouvelle page de test avec un formulaire pour soumettre vos résultats est disponible : http://cahnory.fr/css/tests/checked-target2.html

Merci à vous !

J’ai pris très tôt la bonne habitudes de valider mes documents html. Comme toute personne un minimum consciencieuse. À force on fini par ne plus trop faire d’erreur, on vérifie simplement que des étourderies ne se soient pas glissées ça et là.

Oui mais voilà, il arrive que l’on doit traquer les erreurs dans des documents qui ne sont pas les notres. Là, une chose revient très souvent et peu littéralement pourrir un rapport d’erreur, cette chose c’est les & non convertis en entité html (&).

Afficher davantage

Je suis régulièrement sur le chat de developpez.com où j’essai de répondre aux questions posées dans la limite du possible et de mon humeur.
Force est de constater que les questions concernants les expressions régulières reviennent souvent. N’ayant pas pour habitude de conserver toutes les réponses, je me suis dit qu’il pourrait être intéressant de les poster ici avec plus ou moins d’explication sur comment j’arrive au résultat voulu.

Je commence avec une question posée ce matin (j’évite en général d’aller sur le chat pendant mes heures de travail mais il se trouve que j’avais une question à poser moi aussi) :

comment valider une IP v4 ?

Afficher davantage

Les boutons en actions

Sous OS X (et peut-être ailleurs) certains boutons ont un effet de pression bien particulier.  En plus d’un assombrissement, une ombre interne latérale renforce la perception d’enfoncement. On en distingue de plusieurs forme, certains ayant l’air complètement enfoncés, d’autres seulement en leur centre,… je vous présente ici un moyen de parvenir au même résultat.

Afficher davantage

Popularisé par iOS, le checkbox slider est un élément d’interface utilisateur très apprécié (des concepteurs tout au moins). Il existe beaucoup de plugins JavaScript permettant de transformer les habituelles checkboxes en slider mais vous allez voir qu’il est possible d’y parvenir à l’aide de CSS seulement.

Afficher davantage

Bien connus de tous les développeurs web, le favicon fut pendant longtemps la seule icone dont on avait à se soucier. Aujourd’hui ce n’est plus le cas et un point s’impose afin de gérer au mieux cet aspect certe mineur mais ô combien plaisant de nos sites internets.

Afficher davantage

C’est quelque chose que l’on voit souvent sur le net et les tutos à ce sujet ne manquent pas. Alors pourquoi en écrire un de plus me direz-vous ? Car la plupart sont en anglais mais aussi, et surtout, parce que dans la folie du CSS3 beaucoup oublient les bonnes vieilles méthodes.

Guère épais… des boutons

Voici le type de bouton que nous allons réaliser, tel qu’ils seront affichés par les navigateurs modernes et plus anciens :

Afficher davantage