SEND all files + questionnaires + json + data_tests
This commit is contained in:
vincent_b
105
public/codes/all/cibler_adjascent_avance.css
Normal file
105
public/codes/all/cibler_adjascent_avance.css
Normal file
@@ -0,0 +1,105 @@
|
||||
#cibler_adjascent_avance {
|
||||
min-height: 300px;
|
||||
|
||||
img {
|
||||
height: 300px;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.go_button ~ .default_invisible {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
img {
|
||||
border: 4px solid pink;
|
||||
}
|
||||
}
|
||||
|
||||
div#last_trigger {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* TOUT .default_invisible Au meme niveau (meme parent)
|
||||
... que .go_button sera affecté (quand .go_button:hover) */
|
||||
.go_button:hover ~ .default_invisible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
img {
|
||||
border: 4px solid blue;
|
||||
}
|
||||
}
|
||||
|
||||
.go_button + div#content_trigger {
|
||||
right: 500px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 2 == #second_trigger */
|
||||
.go_button + div
|
||||
+ div#second_trigger {
|
||||
right: 300px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* 3 == #last_trigger */
|
||||
.go_button:hover + div + div
|
||||
+ div#last_trigger {
|
||||
right: 730px;
|
||||
margin-right: 350px;
|
||||
transition: margin 1s ease 0s,
|
||||
opacity 0s ease 0.1s;
|
||||
}
|
||||
.go_button ~ .default_invisible > .sub_child {
|
||||
position: relative;
|
||||
right: -300px !important;
|
||||
opacity: 0;
|
||||
transition: all 5s ease 0.1s;
|
||||
}
|
||||
.go_button:hover ~ .default_invisible > .sub_child {
|
||||
visibility: visible;
|
||||
right: 0 !important;
|
||||
opacity: 1;
|
||||
transition: all 1s ease 0.1s,
|
||||
right 2s ease-out 0s;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
.go_button:hover + div + div
|
||||
+ div#last_trigger img {
|
||||
outline: 3px solid red;
|
||||
}
|
||||
.go_button:hover + div + div
|
||||
+ div#last_trigger > span > img[src*="_alt"] {
|
||||
outline: 4px solid yellow;
|
||||
}
|
||||
img[alt="cat_3"] {
|
||||
right: 50px;
|
||||
}
|
||||
|
||||
.go_button:hover + div + div
|
||||
+ div#last_trigger img[src*="_alt"],
|
||||
.go_button:hover + div + div
|
||||
+ div#last_trigger > span > img {
|
||||
position: absolute;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.go_button + div + div
|
||||
+ div#last_trigger
|
||||
+ #trigger_oublie {
|
||||
left: 500px;
|
||||
bottom: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
outline: 3px solid yellow;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
37
public/codes/all/cibler_adjascent_avance.page
Normal file
37
public/codes/all/cibler_adjascent_avance.page
Normal file
@@ -0,0 +1,37 @@
|
||||
<div id="cibler_adjascent_avance">
|
||||
<div class="go_button">
|
||||
Go
|
||||
</div>
|
||||
|
||||
<div id="content_trigger" class="default_invisible">
|
||||
<img
|
||||
src="./img/cibler_adjascent_avance.jpg"
|
||||
alt="cat_1" />
|
||||
</div>
|
||||
|
||||
<div id="second_trigger" class="default_invisible">
|
||||
<img
|
||||
src="./img/cibler_adjascent_avance_second.png"
|
||||
alt="cat_2" />
|
||||
</div>
|
||||
|
||||
<div id="last_trigger" class="default_invisible">
|
||||
<img
|
||||
src="./img/cibler_adjascent_avance_last.jpg"
|
||||
alt="cat_3" />
|
||||
|
||||
<span class="sub_child default_invisible">
|
||||
<img
|
||||
src="./img/cibler_adjascent_avance_last_alt.jpg"
|
||||
alt="cat_4" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="trigger_oublie" class="default_invisible">
|
||||
<img
|
||||
src="./img/cibler_adjascent_avance_last_oublie.jpg"
|
||||
alt="cat_5" />
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
109
public/codes/all/cibler_adjascent_avance.result
Normal file
109
public/codes/all/cibler_adjascent_avance.result
Normal file
@@ -0,0 +1,109 @@
|
||||
#cibler_adjascent_avance {
|
||||
min-height: 400px;
|
||||
|
||||
img {
|
||||
height: 400px;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.go_button ~ .default_invisible {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
img {
|
||||
border: 4px solid pink;
|
||||
}
|
||||
}
|
||||
|
||||
div#last_trigger {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* TOUT .default_invisible Au meme niveau (meme parent)
|
||||
... que .go_button sera affecté (quand .go_button:hover) */
|
||||
.go_button:hover ~ .default_invisible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
img {
|
||||
border: 4px solid blue;
|
||||
}
|
||||
}
|
||||
|
||||
.go_button + div#content_trigger {
|
||||
right: 500px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 2 == #second_trigger */
|
||||
.go_button + div
|
||||
+ div#second_trigger {
|
||||
right: 300px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* 3 == #last_trigger */
|
||||
.go_button:hover + div + div
|
||||
+ div#last_trigger {
|
||||
right: 730px;
|
||||
margin-right: 350px;
|
||||
transition: margin 1s ease 0s,
|
||||
opacity 0s ease 0.1s;
|
||||
}
|
||||
.go_button ~ .default_invisible > .sub_child {
|
||||
position: relative;
|
||||
right: -300px !important;
|
||||
opacity: 0;
|
||||
transition: all 5s ease 0.1s;
|
||||
}
|
||||
.go_button:hover ~ .default_invisible > .sub_child {
|
||||
visibility: visible;
|
||||
right: 0 !important;
|
||||
opacity: 1;
|
||||
transition: all 1s ease 0.1s,
|
||||
right 2s ease-out 0s;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* correction */
|
||||
.go_button:hover ~ div#last_trigger img {
|
||||
outline: 3px solid red;
|
||||
}
|
||||
.go_button:hover
|
||||
~ div#last_trigger > span > img[src*="_alt"] {
|
||||
outline: 4px solid yellow;
|
||||
}
|
||||
img[alt="cat_3"] {
|
||||
right: 50px;
|
||||
}
|
||||
|
||||
/* correction */
|
||||
.go_button:hover ~ div#last_trigger img[src*="_alt"],
|
||||
.go_button:hover ~ div#last_trigger > span > img {
|
||||
position: absolute;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.go_button ~ div#last_trigger
|
||||
+ #trigger_oublie {
|
||||
left: 500px;
|
||||
bottom: 0;
|
||||
opacity: 1;
|
||||
visibility: hidden; /* correction */
|
||||
position: absolute;
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
outline: 3px solid yellow;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
/* correction */
|
||||
.go_button:hover + div + div
|
||||
+ div#last_trigger
|
||||
+ #trigger_oublie {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
24
public/codes/all/cibler_adjascent_avance.txt
Normal file
24
public/codes/all/cibler_adjascent_avance.txt
Normal file
@@ -0,0 +1,24 @@
|
||||
Cibler l'élément suivant :
|
||||
- <codescape class="css">element + autre_element.classe { ... }</codescape>
|
||||
Cibler les éléments suivants (meme parent) :
|
||||
- <codescape class="css">element ~ autres_elements.distants { ... }</codescape>
|
||||
Cibler un élément à l'intérieur de :
|
||||
- <codescape class="css">element > .enfant_direct { ... }</codescape>
|
||||
|
||||
<codescape class="css">:hover</codescape> permet de trigger quand la souris passe sur un élément
|
||||
<codescape class="css">:active, :focus, :checked, :has, :is, :not</codescape>
|
||||
( ... il y a d'autres pseudo-classes... question suivante )
|
||||
|
||||
On peut cumuler...
|
||||
- <codescape class="css">element:hover + autre_element { ... }</codescape>
|
||||
( va cibler <em>autre_element</em> si souris :hover <em>element</em> )
|
||||
|
||||
TODO:
|
||||
- Actuellement <codescape class="css">#trigger_oublie</codescape> s'affiche par defaut (au chargement)
|
||||
: modifier pour qu'il aparaisse au survol de <codescape class="css">.go_button</codescape>
|
||||
+ changer le <codescape class="css">z-index pour</codescape> que <em>cibler_adjascent_avance_last_oublie.jpg</em> passe au dessus ( z-index )
|
||||
- simplifier le code ( <codescape class="css">/* remplacer */ el... + el... + el... /* par */ el... ~ el... </codescape> )
|
||||
|
||||
HELP, selectionner un élement et garder son état en mod "survol" (:hover)...
|
||||
( il resetera dans l'état :hover, comme si votre souris était en train de le survoler )
|
||||
<img src="/img/CSShover_devtool_state.png" />
|
||||
91
public/codes/all/cibler_css_id_class_menu.css
Normal file
91
public/codes/all/cibler_css_id_class_menu.css
Normal file
@@ -0,0 +1,91 @@
|
||||
#cibler_css_id_class_el {
|
||||
nav#top_menu, nav#vertical_menu {
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
|
||||
#top_menu {
|
||||
width: fit-content;
|
||||
float: right;
|
||||
padding-left: 30px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
#top_menu .menu_liste {
|
||||
padding-left: 0;
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
#vertical_menu .menu_liste {
|
||||
margin: 0 30px 0 0px;
|
||||
padding-left: 0;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
.menu_item {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
padding: 10px;
|
||||
border: 1px solid;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
a[data-type] {
|
||||
background: yellow;
|
||||
}
|
||||
li:hover {
|
||||
background: #000 !important;
|
||||
color: #FFF !important;
|
||||
}
|
||||
|
||||
.menu_item .submenu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
/* width: fit-content; */
|
||||
width: max-content;
|
||||
border: 1px solid;
|
||||
padding: 3px 20px 10px 15px;
|
||||
margin: 8px 0 0 -10px;
|
||||
background: #000 !important;
|
||||
color: #FFF !important;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
}
|
||||
.menu_item:hover .submenu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu_item .submenu .submenu_item {
|
||||
color: #FFF;
|
||||
background: #000 !important;
|
||||
border: 1px solid #000;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
.menu_item .submenu .submenu_item:hover {
|
||||
filter: invert(1);
|
||||
margin-left: -15px;
|
||||
margin-right: -23px;
|
||||
padding-left: 13px;
|
||||
border-color: #FFF !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#vertical_menu {
|
||||
width: fit-content;
|
||||
float: left;
|
||||
}
|
||||
#vertical_menu li.menu_item {
|
||||
display: block;
|
||||
width: max-content;
|
||||
padding: 9px 10px;
|
||||
}
|
||||
#vertical_menu .submenu {
|
||||
margin-top: -35px !important;
|
||||
margin-left: 80px !important;
|
||||
}
|
||||
|
||||
}
|
||||
59
public/codes/all/cibler_css_id_class_menu.page
Normal file
59
public/codes/all/cibler_css_id_class_menu.page
Normal file
@@ -0,0 +1,59 @@
|
||||
<div id="cibler_css_id_class_el">
|
||||
<nav id="top_menu">
|
||||
<ul class="menu_liste">
|
||||
<li class="menu_item" data-num="0">menu 0</li>
|
||||
<li class="menu_item" data-num="1">menu 1</li>
|
||||
<li class="menu_item" data-num="2">menu 2</li>
|
||||
|
||||
<li class="menu_item" data-num="3" data-sub="oui">
|
||||
<a id="menu_3">menu 3</a>
|
||||
<ul class="submenu">
|
||||
<li class="submenu_item" data-num="1">sous-menu 1</li>
|
||||
<li class="submenu_item" data-num="2">sous-menu 2</li>
|
||||
<li class="submenu_item" data-num="3">sous-menu 3</li>
|
||||
<li class="submenu_item" data-num="4">sous-menu 4</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="menu_item">
|
||||
<a href='#' target='_blank' data-type='demo'>menu 4</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<nav id="vertical_menu">
|
||||
|
||||
<ul class="menu_liste">
|
||||
<li class="menu_item" data-num="0">menu 0</li>
|
||||
<li class="menu_item" data-num="1">menu 1</li>
|
||||
<li class="menu_item" data-num="2">menu 2</li>
|
||||
<li class="menu_item" data-num="3" data-sub="oui">
|
||||
<a id="menu_3">menu 3</a>
|
||||
<ul class="submenu">
|
||||
<li class="submenu_item" data-type="files img">
|
||||
images
|
||||
</li>
|
||||
<li class="submenu_item" data-type="files draw">
|
||||
dessins
|
||||
</li>
|
||||
<li class="submenu_item" data-type="files txt">
|
||||
textes
|
||||
</li>
|
||||
<li class="submenu_item" data-type="files ref">
|
||||
references
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu_item">
|
||||
<a href='https://code.bonnebulle.xyz' target='_blank' data-type='demo'>menu 4</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section>
|
||||
<article>
|
||||
Aliquip excepteur et ad aute magna eu nulla in ut id excepteur tempor elit. Aliquip pariatur cupidatat do. Eiusmod voluptate irure fugiat aliquip eiusmod laborum quis veniam in irure id anim nisi. Ex adipisicing sint quis nisi quis ipsum fugiat. Excepteur consectetur sit irure ad occaecat duis. Incididunt ipsum non amet amet tempor fugiat magna sint ad. Eu consectetur nostrud sit quis officia aliqua consequat eiusmod officia occaecat elit sint labore do. Ullamco dolor consectetur aliquip pariatur reprehenderit incididunt esse.
|
||||
</article>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
6
public/codes/all/cibler_css_id_class_menu.result
Normal file
6
public/codes/all/cibler_css_id_class_menu.result
Normal file
@@ -0,0 +1,6 @@
|
||||
<pre><code class="line-numbers show-language nohelp_result language-css">
|
||||
#top_menu .submenu_item[data-num="4"],
|
||||
#vertical_menu [data-type="files draw"] {
|
||||
background: red !important;
|
||||
}
|
||||
</code></pre>
|
||||
41
public/codes/all/cibler_css_id_class_menu.txt
Normal file
41
public/codes/all/cibler_css_id_class_menu.txt
Normal file
@@ -0,0 +1,41 @@
|
||||
Element :
|
||||
div a { ... } /* CSS cible a présent dans une div */
|
||||
|
||||
<pre>
|
||||
<code class="line-numbers show-language nohelp_result language-markup">
|
||||
<div>
|
||||
<a href='http:...' target='_blank' data-type='demo'>lien</a>
|
||||
</div>
|
||||
<a href='http:...'>lien</a> <!-- non ciblé/affecté, hors de div -->
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
Attribut :
|
||||
'href', 'target', 'data-type' (dans l'element a)...
|
||||
<codescape class="css">a[href] { ... } /* element a avec attribut href */</codescape>
|
||||
<codescape class="css">a[href$=".html"] { ... } /* attribut href fini par... */</codescape>
|
||||
<codescape class="css">a[href^="https"] { ... } /* attribut href commence par... */</codescape>
|
||||
<codescape class="css">a[href*="fichier_final"] { ... } /* attribut href contient... */</codescape>
|
||||
|
||||
Id :
|
||||
<codescape class="css">
|
||||
#top_menu { .... }
|
||||
</codescape>
|
||||
<codescape class="html">
|
||||
<nav id="top_menu">
|
||||
</codescape>
|
||||
|
||||
Classe :
|
||||
<codescape class="css">
|
||||
.menu_item { .... }
|
||||
</codescape>
|
||||
<codescape class="html">
|
||||
<li class="menu_item">menu 1</li>
|
||||
</codescape>
|
||||
|
||||
TODO :
|
||||
Cibler le 4e sous-menu dans #top_menu
|
||||
Faire de même dans le menu de gauche, mais cette fois, cibler le 2e sous-menu
|
||||
... forcer leur couleur de fond (background) dans une couleur de votre choix...
|
||||
... Utiliser !important si nécesaire
|
||||
|
||||
49
public/codes/all/cibler_css_margin_transition.css
Normal file
49
public/codes/all/cibler_css_margin_transition.css
Normal file
@@ -0,0 +1,49 @@
|
||||
/* Ici on peut attitrer des valeurs à des variables */
|
||||
/* on peut utiliser ces variables plusieures fois dans le CSS */
|
||||
/* Ici on va assigner cette variable à tous les éléments */
|
||||
/* normalement on utilise plutôt :root */
|
||||
* {
|
||||
--element_width: 200px !important;
|
||||
}
|
||||
#mousehover_movemargin_element {
|
||||
width: var(--element_width);
|
||||
height: 200px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
background: red;
|
||||
color: #FFF;
|
||||
}
|
||||
#mousehover_movemargin:hover #mousehover_movemargin_element {
|
||||
background:yellow;
|
||||
color: #000;
|
||||
|
||||
/*
|
||||
calc permet de calculer
|
||||
(adition +, soustraction -, multiplication *, ....
|
||||
Ici on veut que la marge à gauche soit de :
|
||||
100%
|
||||
-130px
|
||||
-70px ( == 200px )
|
||||
( la largeur "width" de #mousehover_movemargin_element )
|
||||
*/
|
||||
margin-left: calc(100% - 130px - 70px);
|
||||
/* On peut faire plus simple en utiisant la variable */
|
||||
/* Ainsi, si on la modifie, dans * ...
|
||||
... la largeur de #mousehover_movemargin_element
|
||||
... ainsi que la marge-left ici...
|
||||
..... vont être affectées
|
||||
Si je veux changer la lageure+margin-left ici
|
||||
... je n'ai plus qu'à changer --element_width dans * !!!
|
||||
*/
|
||||
margin-left: calc(100% - var(--element_width)); /* 100% - 200px */
|
||||
|
||||
|
||||
/* https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/transition*/
|
||||
/* all pour affecter toutes les propriétés CSS */
|
||||
/* transition: all 1s; */
|
||||
transition:
|
||||
margin-left 5s ease-in-out 0s,
|
||||
color 2s ease-in-out 0s;
|
||||
cursor: pointer;
|
||||
}
|
||||
6
public/codes/all/cibler_css_margin_transition.page
Normal file
6
public/codes/all/cibler_css_margin_transition.page
Normal file
@@ -0,0 +1,6 @@
|
||||
<div class="bouge_de_la">
|
||||
<div id="mousehover_movemargin">
|
||||
<div id="mousehover_movemargin_element">Youhouuuuu</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- https://code.bonnebulle.xyz/__html_css_js/public/0_intro.html#margin_move_transition -->
|
||||
9
public/codes/all/cibler_css_margin_transition.txt
Normal file
9
public/codes/all/cibler_css_margin_transition.txt
Normal file
@@ -0,0 +1,9 @@
|
||||
Ici, on ajoute une <codescape class="language-css">transition</codescape> !
|
||||
Elle va s'activer au survol de <code>#mousehover_movemargin</code> (:hover)
|
||||
Modifier :
|
||||
- la durée de la transition
|
||||
- la délais de la transition
|
||||
- la marge appliquée au survol (<codescape class="language-css">margin-left</codescape>) == 300px
|
||||
- la transition au survol affecte toutes les propriétés à la fois...
|
||||
Changer :
|
||||
- la valeure de <codescape class="language-css">--element_width</codescape>
|
||||
30
public/codes/all/cibler_css_multiples_vs_is.css
Normal file
30
public/codes/all/cibler_css_multiples_vs_is.css
Normal file
@@ -0,0 +1,30 @@
|
||||
* {
|
||||
color: red
|
||||
}
|
||||
p {
|
||||
color: green;
|
||||
}
|
||||
#alt_saison,
|
||||
#popoesie u#soleils {
|
||||
display: none;
|
||||
}
|
||||
/* cibler li + tout les éléments qui sont dedans*/
|
||||
li.poem,
|
||||
li.poem * {
|
||||
color:#000;
|
||||
}
|
||||
/* cibler u et i */
|
||||
li.poem u,
|
||||
li.poem i {
|
||||
color: rgb(15, 126, 82);
|
||||
}
|
||||
/* avec la condition :is on cible <u> ou <i> présent dans li.poem
|
||||
... pratique, on fait une pierre deux coups ! */
|
||||
li.poem *:is(u,i) {
|
||||
color: rgb(81, 39, 247);
|
||||
padding: 3px 8px 3px 5px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
#popoesie * { background: cyan; }
|
||||
#popoesie *:hover { background: yellow; }
|
||||
18
public/codes/all/cibler_css_multiples_vs_is.page
Normal file
18
public/codes/all/cibler_css_multiples_vs_is.page
Normal file
@@ -0,0 +1,18 @@
|
||||
<html>
|
||||
<p>Un peu de bleu</p>
|
||||
|
||||
<a href="#">lien hors sujet</a>
|
||||
|
||||
<p id="saisons">
|
||||
c'est le ciel <span>d'été</span>
|
||||
<span id="alt_saison">d'automne</span> !
|
||||
</p>
|
||||
|
||||
<ul id="popoesie">
|
||||
<li class="poem">des <span><u>nuages</u> rouges</span></li>
|
||||
<li class="poem">des <span>mains <i>tombées</i></span></li>
|
||||
<li class="poem last">des <span>chiens froids</span>
|
||||
<u id="soleils">soleils bleus</u>
|
||||
</li>
|
||||
</ul>
|
||||
</html>
|
||||
49
public/codes/all/cibler_css_multiples_vs_is.result
Normal file
49
public/codes/all/cibler_css_multiples_vs_is.result
Normal file
@@ -0,0 +1,49 @@
|
||||
<pre>
|
||||
<code class="line-numbers show-language nohelp_result language-css">
|
||||
* {
|
||||
color: red;
|
||||
}
|
||||
p {
|
||||
color: green;
|
||||
}
|
||||
|
||||
#alt_saison,
|
||||
#popoesie u#soleils {
|
||||
display: none;
|
||||
}
|
||||
li.poem,
|
||||
li.poem * {
|
||||
color:#000;
|
||||
}
|
||||
li.poem *:is(u,i) {
|
||||
color: rgb(15, 126, 82);
|
||||
}
|
||||
/* extra */
|
||||
#popoesie * { background: cyan; }
|
||||
#popoesie *:hover { background: yellow; }
|
||||
|
||||
/* CORRECTIONS */
|
||||
a,
|
||||
#saisons span {
|
||||
display: none;
|
||||
}
|
||||
#saisons span#alt_saison {
|
||||
display: inline-block;
|
||||
color: blue;
|
||||
}
|
||||
li.poem.last span {
|
||||
display: none;
|
||||
}
|
||||
#popoesie u#soleils {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
li.poem *:is(u,i) {
|
||||
color: red;
|
||||
}
|
||||
p, li, ul {
|
||||
margin:0;
|
||||
padding: 0;
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
16
public/codes/all/cibler_css_multiples_vs_is.txt
Normal file
16
public/codes/all/cibler_css_multiples_vs_is.txt
Normal file
@@ -0,0 +1,16 @@
|
||||
* en CSS cible tous les éléments
|
||||
( c'est un joker )
|
||||
( il prend tous les droits )
|
||||
( ça peut être envahissant )
|
||||
...
|
||||
|
||||
Faire disparaitre <code>lien hors sujet</code>
|
||||
Faire disparaitre <code>d'été</code>
|
||||
Faire apparaitre <code>d'automne</code>
|
||||
... et colorer en <codescape class="language-css">bleu</codescape>
|
||||
|
||||
Faire disparaitre <code>chiens froids</code>
|
||||
Faire apparaitre <code>soleils bleus</code>
|
||||
Dans <code>li.poem</code>, changer la couleur des éléments <code>u</code> et <code>i</code>
|
||||
|
||||
Retirer <codescape class="language-css">margin</codescape> et <codescape class="language-css">padding</codescape> à tous les <code>p</code>, <code>ul</code> et <code>li</code> ( en utilisant :is )
|
||||
70
public/codes/all/cibler_css_padding.css
Normal file
70
public/codes/all/cibler_css_padding.css
Normal file
@@ -0,0 +1,70 @@
|
||||
/* neasting, ce qui est à l'intérieur (plus bas)...
|
||||
cible l'élément s'il est présent dans #margin_please (enfant) */
|
||||
#padding_project {
|
||||
div {
|
||||
border: 3px solid red;
|
||||
border-width: 6px 1px 6px 1px;
|
||||
border-color: red orange green blue;
|
||||
|
||||
margin: 10px 0px; /* top et bottom == 10px ; left et right == 0px ; */
|
||||
}
|
||||
|
||||
|
||||
#padding_all { /* neasting */
|
||||
padding: 10px; /* affecte #padding_all */
|
||||
border: 2px dashed blue;
|
||||
|
||||
/* grâce au neasting, je n'ai pas à présiser que le parent est #padding_all */
|
||||
/* div#padding_all div { */
|
||||
/* ici toute div enfant de #padding_all est ciblée / affectée */
|
||||
div {
|
||||
margin: 60px 0px; /* top et bottom == 60px ; left et right == 0px ; */
|
||||
}
|
||||
div#sub_wrapper {
|
||||
padding: 10px;
|
||||
border-color: yellow;
|
||||
border-width: 10px;
|
||||
}
|
||||
.inline {
|
||||
border-color: #000;
|
||||
border-width: 1px 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
/* ici :not permet de ne pas affecter certaines div avec la class .no_margin */
|
||||
div:not(.no_margin) {
|
||||
margin: 30px 40px; /* top et bottom == 30px ; left et right == 40px ; */
|
||||
}
|
||||
/* cela évite d'avoir à écrire une nouvelle instruction spécifique, affectant .no_margin */
|
||||
/* .no_margin {
|
||||
margin:0
|
||||
} */
|
||||
}
|
||||
|
||||
#padding_left {
|
||||
padding-left: 30px;
|
||||
}
|
||||
#padding_top {
|
||||
padding-top: 30px;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
#padding_right {
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.laterales { /* blocs au début et fin, meme classe */
|
||||
width: 20%;
|
||||
}
|
||||
.boxfix {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
background: #FFF;
|
||||
}
|
||||
.padding_color {
|
||||
background-color: #e3dcff ;
|
||||
}
|
||||
}
|
||||
25
public/codes/all/cibler_css_padding.page
Normal file
25
public/codes/all/cibler_css_padding.page
Normal file
@@ -0,0 +1,25 @@
|
||||
<div id="padding_project">
|
||||
|
||||
<div id="padding_all">
|
||||
#padding_all<br />
|
||||
|
||||
<div id="sub_wrapper">
|
||||
#sub_wrapper<br />
|
||||
|
||||
<div id="padding_right"
|
||||
class="no_margin inline padding_color boxfix laterales">
|
||||
<span class="label">#padding_right</span>
|
||||
</div>
|
||||
<div id="padding_top"
|
||||
class="no_margin inline padding_color boxfix">
|
||||
<span class="label">#padding_top</span>
|
||||
</div>
|
||||
<div id="padding_left"
|
||||
class="no_margin inline padding_color boxfix laterales">
|
||||
<span class="label">#padding_left</span>
|
||||
</div>
|
||||
|
||||
</div> <!-- #sub_wrapper -->
|
||||
</div> <!-- #padding_all -->
|
||||
|
||||
</div> <!-- #padding_project -->
|
||||
16
public/codes/all/cibler_css_padding.result
Normal file
16
public/codes/all/cibler_css_padding.result
Normal file
@@ -0,0 +1,16 @@
|
||||
<pre>
|
||||
<code class="line-numbers show-language nohelp_result language-css">
|
||||
#padding_left,
|
||||
#padding_top,
|
||||
#padding_right {
|
||||
padding:
|
||||
30px 10px 20px 10px;
|
||||
width: 400px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
is(#padding_left, #padding_top, #padding_right) {
|
||||
/* ... marchait aussi */
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
12
public/codes/all/cibler_css_padding.txt
Normal file
12
public/codes/all/cibler_css_padding.txt
Normal file
@@ -0,0 +1,12 @@
|
||||
Changer le padding des éléments :
|
||||
<code>#padding_left</code>
|
||||
<code>#padding_top</code>
|
||||
<code>#padding_right</code>
|
||||
Leur attribuer ces propriété et valeures :
|
||||
- <codescape class="language-css">padding-top</codescape> == 30px
|
||||
- <codescape class="language-css">padding-right</codescape> == 10px
|
||||
- <codescape class="language-css">padding-bottom</codescape> == 20px
|
||||
- <codescape class="language-css">padding-left</codescape> == 10px
|
||||
Changer leur largeure, fixe :
|
||||
- <codescape class="language-css">width</codescape> == 400px
|
||||
- <codescape class="language-css">tex-align</codescape> == center
|
||||
122
public/codes/all/cibler_has_checked.css
Normal file
122
public/codes/all/cibler_has_checked.css
Normal file
@@ -0,0 +1,122 @@
|
||||
#world_wrapper {
|
||||
border: 3px solid blue;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
margin: -10px;
|
||||
}
|
||||
#foret {
|
||||
border: 8px solid green;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
#world_wrapper:has(#checkbox:checked) {
|
||||
background: #ffa5002b;
|
||||
}
|
||||
#world_wrapper:has(.champignon_bleu) {
|
||||
background: blue;
|
||||
}
|
||||
|
||||
|
||||
#champi_img {
|
||||
display:none;
|
||||
}
|
||||
|
||||
#world_wrapper:has(#checkbox:checked) #foret,
|
||||
#checkbox:checked + #foret,
|
||||
#foret:has(.champignon_rouge) {
|
||||
border: 5px solid red;
|
||||
}
|
||||
|
||||
#foret {
|
||||
margin: auto; /* si display==block + width donnée...
|
||||
.... les marges auto à gauche et à droite vont centrer l'élément*/
|
||||
width: 600px;
|
||||
position: relative;
|
||||
}
|
||||
#foret,
|
||||
.champignon_rouge {
|
||||
background-size: 100% !important;
|
||||
height: 410px;
|
||||
display: block;
|
||||
width: 400px;
|
||||
background-position: 0px bottom !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
#foret {
|
||||
background: url('https://cdn.forestresearch.gov.uk/2021/11/forestry-home-1-2120x1360.jpg');
|
||||
height: 420px;
|
||||
width: 740px;
|
||||
}
|
||||
.champignon_rouge {
|
||||
width: 400px;
|
||||
background: url('https://cdn.futura-sciences.com/buildsv6/images/wide1920/0/e/7/0e77024415_77241_canonique-1358.jpg');
|
||||
background-size: 200px auto !important;
|
||||
background-position: left bottom !important;
|
||||
display: block;
|
||||
position: relative;
|
||||
/* si l'élément est positionné (relative, fixed, absolute...) */
|
||||
/* on peut changer sa position en partant... */
|
||||
/* du haut==top bas==bottom gauche==left droite==right */
|
||||
/* ... on peut mettre des valeurs négatives/ou/positives */
|
||||
bottom: 10px; /* l'élément est déplacé de 10px depuis le bas */
|
||||
right: -200px; /* l'élément est déplacé de -100px depuis le droite */
|
||||
/* ... ici negatif(soustraction), ici le déplace vers la gauche*/
|
||||
}
|
||||
.champignon_rouge.droite {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
right: 100px !important;
|
||||
z-index: 99999;
|
||||
border: 1px solid red;
|
||||
width: 100px !important;
|
||||
background: none !important;
|
||||
height: 100px !important;
|
||||
}
|
||||
|
||||
#world_wrapper:has(#checkbox:checked) .champignon_rouge {
|
||||
background-size: 100px auto !important;;
|
||||
}
|
||||
#world_wrapper:has(#checkbox:checked) #foret:hover {
|
||||
width: 100vw;
|
||||
.champignon_rouge:not(.droite) {
|
||||
width: fit-content !important;
|
||||
background-size: contain !important;
|
||||
height: 40%;
|
||||
background-position: center bottom !important;
|
||||
left: 230px;
|
||||
bottom: 20px;
|
||||
border: 3px solid red;
|
||||
min-width: 380px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
#world_wrapper a:active ~ #foret img,
|
||||
#world_wrapper a:active ~ #foret .champignon_rouge {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
#champi_img {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
z-index: 999;
|
||||
bottom: 0;
|
||||
left: 10vw;
|
||||
}
|
||||
#champi_img_droite {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
z-index: 999;
|
||||
bottom: 0;
|
||||
left: 0px;
|
||||
right: auto;
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-height: 100px
|
||||
}
|
||||
#checkbox:checked + #foret img {
|
||||
display: block;
|
||||
}
|
||||
input#checkbox {
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
22
public/codes/all/cibler_has_checked.page
Normal file
22
public/codes/all/cibler_has_checked.page
Normal file
@@ -0,0 +1,22 @@
|
||||
<div id="world_wrapper">
|
||||
|
||||
<a href="#foret">foret</a>
|
||||
<input id="checkbox" type="checkbox" />
|
||||
|
||||
<div id="foret">
|
||||
|
||||
<span class="champignon_rouge">
|
||||
<!-- .champignon_rouge -->
|
||||
<!-- pas d'image -->
|
||||
</span>
|
||||
|
||||
<span class="champignon_rouge droite">
|
||||
<!-- .champignon_rouge.droite -->
|
||||
<!-- + img#champi_img_droite -->
|
||||
<img id="champi_img_droite" src="./img/03902b7b.png">
|
||||
</span>
|
||||
|
||||
<img id="champi_img" src="./img/03902b7b.png">
|
||||
|
||||
</div> <!-- foret -->
|
||||
</div>
|
||||
153
public/codes/all/cibler_has_checked.result
Normal file
153
public/codes/all/cibler_has_checked.result
Normal file
@@ -0,0 +1,153 @@
|
||||
#world_wrapper {
|
||||
/* correction */
|
||||
background: url('https://www.borealforest.org/wp-content/uploads/2022/08/Forest-area-1024x576.jpg');
|
||||
border: 3px solid blue;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
margin: -10px;
|
||||
|
||||
}
|
||||
#foret {
|
||||
border: 8px solid green;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
#world_wrapper:has(#checkbox:checked) {
|
||||
background: #ffa5002b;
|
||||
}
|
||||
#world_wrapper:has(.champignon_bleu) {
|
||||
background: blue;
|
||||
}
|
||||
|
||||
|
||||
#champi_img {
|
||||
display:none;
|
||||
}
|
||||
|
||||
#world_wrapper:has(#checkbox:checked) #foret,
|
||||
#checkbox:checked + #foret,
|
||||
#foret:has(.champignon_rouge) {
|
||||
border: 5px solid red;
|
||||
}
|
||||
|
||||
#foret {
|
||||
margin: auto; /* si display==block + width donnée...
|
||||
.... les marges auto à gauche et à droite vont centrer l'élément*/
|
||||
width: 600px;
|
||||
position: relative;
|
||||
}
|
||||
#foret,
|
||||
.champignon_rouge {
|
||||
background-size: 100% !important;
|
||||
height: 410px;
|
||||
display: block;
|
||||
width: 400px;
|
||||
background-position: 0px bottom !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
#foret {
|
||||
/* correction */
|
||||
background: url('https://cdn.futura-sciences.com/sources/images/dossier/1088/03-1308.jpg');
|
||||
height: 420px;
|
||||
width: 740px;
|
||||
}
|
||||
.champignon_rouge {
|
||||
width: 400px;
|
||||
background: url('https://cdn.futura-sciences.com/buildsv6/images/wide1920/0/e/7/0e77024415_77241_canonique-1358.jpg');
|
||||
background-size: 200px auto !important;
|
||||
background-position: left bottom !important;
|
||||
display: block;
|
||||
position: relative;
|
||||
/* si l'élément est positionné (relative, fixed, absolute...) */
|
||||
/* on peut changer sa position en partant... */
|
||||
/* du haut==top bas==bottom gauche==left droite==right */
|
||||
/* ... on peut mettre des valeurs négatives/ou/positives */
|
||||
bottom: 10px; /* l'élément est déplacé de 10px depuis le bas */
|
||||
right: -200px; /* l'élément est déplacé de -100px depuis le droite */
|
||||
/* ... ici negatif(soustraction), ici le déplace vers la gauche*/
|
||||
}
|
||||
.champignon_rouge.droite {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
right: 100px !important;
|
||||
z-index: 99999;
|
||||
border: 1px solid red;
|
||||
width: 100px !important;
|
||||
background: none !important;
|
||||
height: 100px !important;
|
||||
}
|
||||
|
||||
#world_wrapper:has(#checkbox:checked) .champignon_rouge {
|
||||
background-size: 100px auto !important;;
|
||||
}
|
||||
#world_wrapper:has(#checkbox:checked) #foret:hover {
|
||||
width: 100vw;
|
||||
.champignon_rouge:not(.droite) {
|
||||
width: fit-content !important;
|
||||
background-size: contain !important;
|
||||
height: 40%;
|
||||
background-position: center bottom !important;
|
||||
left: 230px;
|
||||
bottom: 20px;
|
||||
border: 3px solid red;
|
||||
min-width: 380px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
#world_wrapper a:active ~ #foret img,
|
||||
#world_wrapper a:active ~ #foret .champignon_rouge {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
#champi_img {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
z-index: 999;
|
||||
bottom: 0;
|
||||
left: 10vw;
|
||||
}
|
||||
#champi_img_droite {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
z-index: 999;
|
||||
bottom: 0;
|
||||
left: 0px;
|
||||
right: auto;
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-height: 100px
|
||||
}
|
||||
#checkbox:checked + #foret img {
|
||||
display: block;
|
||||
}
|
||||
input#checkbox {
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* correction */
|
||||
#world_wrapper:has(#checkbox:checked) {
|
||||
.champignon_rouge {
|
||||
left: 400px !important;
|
||||
}
|
||||
}
|
||||
#world_wrapper:has(#checkbox:checked) #foret:hover {
|
||||
.champignon_rouge:not(.droite) {
|
||||
left: 400px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
29
public/codes/all/cibler_has_checked.txt
Normal file
29
public/codes/all/cibler_has_checked.txt
Normal file
@@ -0,0 +1,29 @@
|
||||
<codescape class="css">:has</codescape> est magique
|
||||
Cette pseudo-class permet de cibler (et donc modfifier le comportement d'un élement) dès lors qu'il contient un autre élement
|
||||
Si <code>#foret</code> contient <code>.champignon_rouge</code> on peut ajouter une propriété à <code>#foret</code>
|
||||
|
||||
<codescape class="css">:checked</codescape> vérifie si un checkbox est checker (cochée)
|
||||
Si elle est cochée on peut faire quelque chose avec les éléments suivants
|
||||
ou, grace à <codescape class="css">:has</codescape> ... aux éléments parents
|
||||
|
||||
TODO:
|
||||
... quand la checkbox est checked :
|
||||
- Modifier l'image de fond de #foret
|
||||
... on charge l'image en indiquant son <u>url("....")</u>
|
||||
par exemple avec :
|
||||
https://cdn.futura-sciences.com/sources/images/dossier/1088/03-1308.jpg
|
||||
<img src="https://cdn.futura-sciences.com/sources/images/dossier/1088/03-1308.jpg" style="width: 100px;">
|
||||
|
||||
- Modifier le background de #world_wrapper
|
||||
par exemple avec :
|
||||
https://www.borealforest.org/wp-content/uploads/2022/08/Forest-area-1024x576.jpg
|
||||
<img src="https://www.borealforest.org/wp-content/uploads/2022/08/Forest-area-1024x576.jpg" style="width: 100px;">
|
||||
Ajouter également :
|
||||
<codescape class="css">background-size: cover;</codescape>
|
||||
|
||||
|
||||
Changer la position de <code>.champignon_rouge</code> où vous voulez
|
||||
- faire cela quand la checkbox est <codescape class="css">:checked</codescape>
|
||||
- egalement quand le lien est <codescape class="css">:active</codescape>
|
||||
- et quand :checked et <codescape class="css">:hover</codescape> sont cumulés
|
||||
( chercher où modifier le code existant )
|
||||
1
public/codes/all/cibler_id_classes_multiples.css
Normal file
1
public/codes/all/cibler_id_classes_multiples.css
Normal file
@@ -0,0 +1 @@
|
||||
/* Modifier le CSS ici */
|
||||
13
public/codes/all/cibler_id_classes_multiples.page
Normal file
13
public/codes/all/cibler_id_classes_multiples.page
Normal file
@@ -0,0 +1,13 @@
|
||||
<!-- MUTLIPLE -->
|
||||
<div id="wrap_p_easy">
|
||||
<p>
|
||||
je suis un paragraphe parmis d'autres
|
||||
</p>
|
||||
<p>
|
||||
nous sommes tous uniques car nous sommes des paragraphes distincts <span class="important">et nous pouvons contenir du texte <span>mis en forme autrement</span></span>
|
||||
</p>
|
||||
<p class="last_p important">
|
||||
nous finirons par sortir de l'emprise de cette div qui nous encercle !
|
||||
</p>
|
||||
</div>
|
||||
|
||||
13
public/codes/all/cibler_id_classes_multiples.result
Normal file
13
public/codes/all/cibler_id_classes_multiples.result
Normal file
@@ -0,0 +1,13 @@
|
||||
<pre><code class="line-numbers show-language nohelp_result language-css">
|
||||
#wrap_p_easy p {
|
||||
color: red;
|
||||
text-decoration: underline;
|
||||
font-size: 30px
|
||||
}
|
||||
span span {
|
||||
background: yellow;
|
||||
}
|
||||
p.last_p {
|
||||
font-style: italic;
|
||||
}
|
||||
</code></pre>
|
||||
4
public/codes/all/cibler_id_classes_multiples.txt
Normal file
4
public/codes/all/cibler_id_classes_multiples.txt
Normal file
@@ -0,0 +1,4 @@
|
||||
cibler les <code>paragraphes</code> présents dans la <code>div aillant pour id "wrap_p_easy"</code>
|
||||
... ajouter à ces paragraphes une couleur + text-decoration + taille de police (CSS)
|
||||
... cibler un élément <code>span</code> présent à l'intérieur d'une autre <code>span</code>, modifier son background (CSS)
|
||||
cibler le <code>dernier paragraphe</code>... changer <codescape class="language-css">font-style</codescape>
|
||||
61
public/codes/all/cibler_is_not.css
Normal file
61
public/codes/all/cibler_is_not.css
Normal file
@@ -0,0 +1,61 @@
|
||||
li:is(.active, .superactive, .neversleep) {
|
||||
background-color: red;
|
||||
}
|
||||
li.active [data-etat="busy"] {
|
||||
background-color: orange;
|
||||
}
|
||||
li:not(.active) {
|
||||
background-color: cyan;
|
||||
}
|
||||
/* tout élément présent dan li...
|
||||
... qui possède l'ttribut "data-etat" */
|
||||
li [data-etat] {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
li {
|
||||
font-style: italic;
|
||||
/* grâce au neasting... */
|
||||
/* ... les spans contenues dans .state sont ciblées ainsi :
|
||||
... sans neasting on autait écrit :
|
||||
... li.state
|
||||
*/
|
||||
.state {
|
||||
border-left: 15px solid pink;
|
||||
|
||||
/* & indique indique qu'on cible l'élément avec une class "state"
|
||||
.... et (+) un attribut (ou autre propriété tel .exemple)
|
||||
Si li.state a un attribut "data-etat" =égal à= "sleeping" ...
|
||||
... sans neasting on autait écrit :
|
||||
... li.state[data-etat="sleeping"]
|
||||
*/
|
||||
&.exemple, /* , affect si a la class OU l'attribut... */
|
||||
&[data-etat="sleeping"],
|
||||
&:is([data-etat="sleeping"],[data-etat="sleep"])
|
||||
/* ... cumul de conditions pouvant être remplies
|
||||
pour que cette instruction CSS soit remplie */
|
||||
{
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* si une li "possède/contient" == :has(x_condition) */
|
||||
/* alors li en question (parent.e) est affectée/ciblée*/
|
||||
/* ... ici, si li contient un element enfant...
|
||||
...... dont l'attribut est data-etat="sleeping"
|
||||
........ elle a un autre background */
|
||||
li:has([data-etat="sleeping"]) {
|
||||
opacity: 1;
|
||||
background: #8080805e;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
|
||||
li:last-of-type {
|
||||
border-bottom: 3px solid blue;
|
||||
}
|
||||
li:nth-child(3) {
|
||||
border: 5px solid pink;
|
||||
}
|
||||
/* https://css-tricks.com/examples/nth-child-tester/ */
|
||||
18
public/codes/all/cibler_is_not.page
Normal file
18
public/codes/all/cibler_is_not.page
Normal file
@@ -0,0 +1,18 @@
|
||||
<div id="is_or_not">
|
||||
<ul>
|
||||
<li class="normal">Normal</li>
|
||||
<li class="active busy">
|
||||
Working<br />
|
||||
<span class="state" data-etat="busy">Busy</span>
|
||||
</li>
|
||||
<li class="normal">
|
||||
Normal<br />
|
||||
<span class="state" data-etat="sleeping">sleeping</span>
|
||||
</li>
|
||||
<li class="normal">
|
||||
Normal<br />
|
||||
<span class="state" data-etat="sleeping">sleeping</span>
|
||||
</li>
|
||||
<li class="normal">Normal</li>
|
||||
</ul>
|
||||
</div>
|
||||
15
public/codes/all/cibler_is_not.txt
Normal file
15
public/codes/all/cibler_is_not.txt
Normal file
@@ -0,0 +1,15 @@
|
||||
<codescape class='css'>:is</codescape> vérifie si l'élément ciblé contient/possède/a telle classe / attribut / id / état(:hover, :active...)
|
||||
<codescape class='css'>:not</codescape> fait l'inverse...
|
||||
<codescape class='css'>:has</codescape> vérifie si l'élément contient tel element / état
|
||||
|
||||
On cible les éléments en fonction de leurs attributs ainsi :
|
||||
<codescape class='css'>a[href]</codescape> ... un lien avec "href" comme Attribut
|
||||
<codescape class='css'>a[href="#"]</codescape> ... ici l'attribut doit <u>être égal à</u> "#"
|
||||
<codescape class='css'>a[href$=".pdf"]</codescape> ... ici l'attribut doit <u>finir par</u> "#"
|
||||
<codescape class='css'>a[href^="https://"]</codescape> ... ici l'attribut doit <u>commencer par</u> "https://"
|
||||
<codescape class='css'>a[href*="dead_internet"]</codescape> ... ici l'attribut...
|
||||
.... <u>contient n'importe où</u> "dead_internet"
|
||||
|
||||
TODO :
|
||||
Modifier l'opacité des éléments (<code>li</code>) contenant une <code>span</code>...
|
||||
... dont l'attribut <codescape class='css'>"data-state"</codescape> contient <codescape class='css'>"sleep"</codescape>...
|
||||
2
public/codes/all/cibler_orgacss.attendu.page
Normal file
2
public/codes/all/cibler_orgacss.attendu.page
Normal file
@@ -0,0 +1,2 @@
|
||||
Attendu :<br>
|
||||
<img src="/codes/html_css_divers/cibler_orgacss.png" alt="Image non disponible">
|
||||
15
public/codes/all/cibler_orgacss.css
Normal file
15
public/codes/all/cibler_orgacss.css
Normal file
@@ -0,0 +1,15 @@
|
||||
.deux_col {
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.complet {
|
||||
text-decoration: line-through;
|
||||
color: red;
|
||||
}
|
||||
.offre .speciale {
|
||||
color: orange;
|
||||
}
|
||||
li:not(.complet) {
|
||||
color: green;
|
||||
}
|
||||
19
public/codes/all/cibler_orgacss.page
Normal file
19
public/codes/all/cibler_orgacss.page
Normal file
@@ -0,0 +1,19 @@
|
||||
<div id="wrap_holidays">
|
||||
<div id="destinations" class="colonnes deux_col">
|
||||
<ul id="europe">
|
||||
<li>Paris</li>
|
||||
<li class="complet">Barcelone</li>
|
||||
<li class="offre speciale">Berlin</li>
|
||||
<li class="complet">Dublin</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="hotel" class="colonnes deux_col">
|
||||
<ul id="etages">
|
||||
<li>rooftop</li>
|
||||
<li>suites</li>
|
||||
<li class="complet offre speciale">chambres</li>
|
||||
<li>rez de chaussée</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> <!-- #wrap_holidays -->
|
||||
BIN
public/codes/all/cibler_orgacss.png
Executable file
BIN
public/codes/all/cibler_orgacss.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
49
public/codes/all/cibler_orgacss.result
Normal file
49
public/codes/all/cibler_orgacss.result
Normal file
@@ -0,0 +1,49 @@
|
||||
<pre><code class="line-numbers show-language nohelp_result language-none">
|
||||
0 == parce que .offre .speciale ciblerait un élément ".special", enfant de ".offre" (.offre > .speciale)... et non pas tout élémént contenant les classes .offre ET speciale... le CSS correcte pour mettre chambre en orange est .offre.speciale
|
||||
1 == en CSS c'est la dernière instruction qui l'emporte...
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
<pre><code class="line-numbers show-language nohelp_result language-css">
|
||||
.deux_col {
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#wrap_holidays {
|
||||
/* Si on indique : */
|
||||
li {
|
||||
color: green;
|
||||
}
|
||||
.offre {
|
||||
color: orange;
|
||||
}
|
||||
/* ... toute la liste (li) sera en vert */
|
||||
/* si, ensuite, on met : */
|
||||
.complet {
|
||||
color: red;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
/* ...cette instruction étant en dernier, elle prendra le dessus (sur la précédente)...
|
||||
"chambres" étant .complet sera en rouge !!! */
|
||||
}
|
||||
|
||||
|
||||
|
||||
#wrap_holidays.correction.alt {
|
||||
li {
|
||||
&.complet {
|
||||
color: red !important;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
li {
|
||||
color: green;
|
||||
}
|
||||
.offre {
|
||||
color: orange;
|
||||
}
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
3
public/codes/all/cibler_orgacss.txt
Normal file
3
public/codes/all/cibler_orgacss.txt
Normal file
@@ -0,0 +1,3 @@
|
||||
0 Pourquoi "chambres" n'est pas en orange ?
|
||||
1 Réorganiser le CSS pour que "chambres" soit color:red (sans utiliser :not)
|
||||
2 Vous pouvez répondre par une explication ou en réécrivant le CSS
|
||||
76
public/codes/all/data/cibler_adjascent_avance.css
Normal file
76
public/codes/all/data/cibler_adjascent_avance.css
Normal file
@@ -0,0 +1,76 @@
|
||||
test {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
#cibler_adjascent_avance {
|
||||
min-height: 400px;
|
||||
|
||||
img {
|
||||
height: 400px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.default_invisible {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
div#last_trigger {
|
||||
/* transition: all 0.5s ease 2s; */
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.go_button:hover ~ .default_invisible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
/* right: 0; */
|
||||
}
|
||||
|
||||
.go_button + div#content_trigger {
|
||||
right: 500px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 2 == #second_trigger */
|
||||
.go_button + div + div#second_trigger {
|
||||
right: 300px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* 3 == #last_trigger */
|
||||
.go_button:hover + div + div + div#last_trigger {
|
||||
right: 730px;
|
||||
margin-right: 350px;
|
||||
transition: margin 1s ease 0s,
|
||||
opacity 0s ease 0.1s;
|
||||
}
|
||||
.go_button:hover + div + div + div#last_trigger img {
|
||||
border: 3px solid red;
|
||||
}
|
||||
.go_button:hover + div + div + div#last_trigger &gt; span &gt; img[src*="_alt"] {
|
||||
outline: 4px solid yellow;
|
||||
}
|
||||
.go_button:hover + div + div + div#last_trigger img[src*="_alt"],
|
||||
.go_button:hover + div + div + div#last_trigger &gt; span &gt; img {
|
||||
position: absolute;
|
||||
margin-left: -540px;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.go_button + div + div + div#last_trigger
|
||||
+ #trigger_oublie {
|
||||
left: 500px;
|
||||
bottom: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
z-index: -3;
|
||||
outline: 3px solid yellow;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
test {
|
||||
color: pink;
|
||||
}
|
||||
|
||||
#cibler_adjascent_avance {
|
||||
min-height: 400px;
|
||||
|
||||
img {
|
||||
height: 400px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.default_invisible {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
div#last_trigger {
|
||||
/* transition: all 0.5s ease 2s; */
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.go_button:hover ~ .default_invisible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
/* right: 0; */
|
||||
}
|
||||
|
||||
.go_button + div#content_trigger {
|
||||
right: 500px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 2 == #second_trigger */
|
||||
.go_button + div + div#second_trigger {
|
||||
right: 300px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* 3 == #last_trigger */
|
||||
.go_button:hover + div + div + div#last_trigger {
|
||||
right: 730px;
|
||||
margin-right: 350px;
|
||||
transition: margin 1s ease 0s,
|
||||
opacity 0s ease 0.1s;
|
||||
}
|
||||
.go_button:hover + div + div + div#last_trigger img {
|
||||
border: 3px solid red;
|
||||
}
|
||||
.go_button:hover + div + div + div#last_trigger &gt; span &gt; img[src*="_alt"] {
|
||||
outline: 4px solid yellow;
|
||||
}
|
||||
.go_button:hover + div + div + div#last_trigger img[src*="_alt"],
|
||||
.go_button:hover + div + div + div#last_trigger &gt; span &gt; img {
|
||||
position: absolute;
|
||||
margin-left: -540px;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.go_button + div + div + div#last_trigger
|
||||
+ #trigger_oublie {
|
||||
left: 500px;
|
||||
bottom: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
z-index: -3;
|
||||
outline: 3px solid yellow;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
test {
|
||||
color: red;
|
||||
ddd
|
||||
}
|
||||
|
||||
#cibler_adjascent_avance {
|
||||
min-height: 400px;
|
||||
|
||||
img {
|
||||
height: 400px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.default_invisible {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
div#last_trigger {
|
||||
/* transition: all 0.5s ease 2s; */
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.go_button:hover ~ .default_invisible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
/* right: 0; */
|
||||
}
|
||||
|
||||
.go_button + div#content_trigger {
|
||||
right: 500px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 2 == #second_trigger */
|
||||
.go_button + div + div#second_trigger {
|
||||
right: 300px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* 3 == #last_trigger */
|
||||
.go_button:hover + div + div + div#last_trigger {
|
||||
right: 730px;
|
||||
margin-right: 350px;
|
||||
transition: margin 1s ease 0s,
|
||||
opacity 0s ease 0.1s;
|
||||
}
|
||||
.go_button:hover + div + div + div#last_trigger img {
|
||||
border: 3px solid red;
|
||||
}
|
||||
.go_button:hover + div + div + div#last_trigger &gt; span &gt; img[src*="_alt"] {
|
||||
outline: 4px solid yellow;
|
||||
}
|
||||
.go_button:hover + div + div + div#last_trigger img[src*="_alt"],
|
||||
.go_button:hover + div + div + div#last_trigger &gt; span &gt; img {
|
||||
position: absolute;
|
||||
margin-left: -540px;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.go_button + div + div + div#last_trigger
|
||||
+ #trigger_oublie {
|
||||
left: 500px;
|
||||
bottom: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
z-index: -3;
|
||||
outline: 3px solid yellow;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
test {
|
||||
color: red;
|
||||
}
|
||||
|
||||
#cibler_adjascent_avance {
|
||||
min-height: 400px;
|
||||
|
||||
img {
|
||||
height: 400px;
|
||||
position: absolute;
|
||||
}ss
|
||||
|
||||
.default_invisible {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
div#last_trigger {
|
||||
/* transition: all 0.5s ease 2s; */
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.go_button:hover ~ .default_invisible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
/* right: 0; */
|
||||
}
|
||||
|
||||
.go_button + div#content_trigger {
|
||||
right: 500px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 2 == #second_trigger */
|
||||
.go_button + div + div#second_trigger {
|
||||
right: 300px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* 3 == #last_trigger */
|
||||
.go_button:hover + div + div + div#last_trigger {
|
||||
right: 730px;
|
||||
margin-right: 350px;
|
||||
transition: margin 1s ease 0s,
|
||||
opacity 0s ease 0.1s;
|
||||
}
|
||||
.go_button:hover + div + div + div#last_trigger img {
|
||||
border: 3px solid red;
|
||||
}
|
||||
.go_button:hover + div + div + div#last_trigger &gt; span &gt; img[src*="_alt"] {
|
||||
outline: 4px solid yellow;
|
||||
}
|
||||
.go_button:hover + div + div + div#last_trigger img[src*="_alt"],
|
||||
.go_button:hover + div + div + div#last_trigger &gt; span &gt; img {
|
||||
position: absolute;
|
||||
margin-left: -540px;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.go_button + div + div + div#last_trigger
|
||||
+ #trigger_oublie {
|
||||
left: 500px;
|
||||
bottom: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
z-index: -3;
|
||||
outline: 3px solid yellow;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
* {
|
||||
color: redaaaa
|
||||
}
|
||||
p {
|
||||
color: green
|
||||
}
|
||||
#alt_saison {
|
||||
display: none;
|
||||
}
|
||||
#popoesie * { background: cyan; }
|
||||
#popoesie *:hover { background: yellow; }
|
||||
@@ -0,0 +1,109 @@
|
||||
test {
|
||||
color: red;ss
|
||||
}
|
||||
|
||||
#cibler_adjascent_avance {
|
||||
min-height: 400px;
|
||||
|
||||
img {
|
||||
height: 400px;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.go_button ~ .default_invisible {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
img {
|
||||
border: 4px solid pink;
|
||||
}
|
||||
}
|
||||
|
||||
div#last_trigger {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
/* TOUT .default_invisible Au meme niveau (meme parent)
|
||||
... que .go_button sera affecté (quand .go_button:hover) */
|
||||
.go_button:hover ~ .default_invisible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
img {
|
||||
border: 4px solid blue;
|
||||
}
|
||||
}
|
||||
|
||||
.go_button + div#content_trigger {
|
||||
right: 500px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 2 == #second_trigger */
|
||||
.go_button + div
|
||||
+ div#second_trigger {
|
||||
right: 300px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* 3 == #last_trigger */
|
||||
.go_button:hover + div + div
|
||||
+ div#last_trigger {
|
||||
right: 730px;
|
||||
margin-right: 350px;
|
||||
transition: margin 1s ease 0s,
|
||||
opacity 0s ease 0.1s;
|
||||
}
|
||||
.go_button ~ .default_invisible > .sub_child {
|
||||
position: relative;
|
||||
right: -300px !important;
|
||||
opacity: 0;
|
||||
transition: all 5s ease 0.1s;
|
||||
}
|
||||
.go_button:hover ~ .default_invisible > .sub_child {
|
||||
visibility: visible;
|
||||
right: 0 !important;
|
||||
opacity: 1;
|
||||
transition: all 1s ease 0.1s,
|
||||
right 2s ease-out 0s;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
.go_button:hover + div + div
|
||||
+ div#last_trigger img {
|
||||
outline: 3px solid red;
|
||||
}
|
||||
.go_button:hover + div + div
|
||||
+ div#last_trigger > span > img[src*="_alt"] {
|
||||
outline: 4px solid yellow;
|
||||
}
|
||||
img[alt="cat_3"] {
|
||||
right: 50px;
|
||||
}
|
||||
|
||||
.go_button:hover + div + div
|
||||
+ div#last_trigger img[src*="_alt"],
|
||||
.go_button:hover + div + div
|
||||
+ div#last_trigger > span > img {
|
||||
position: absolute;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.go_button + div + div
|
||||
+ div#last_trigger
|
||||
+ #trigger_oublie {
|
||||
left: 500px;
|
||||
bottom: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
outline: 3px solid yellow;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
<div id="cibler_adjascent_avance">
|
||||
<div class="go_button">
|
||||
Goss
|
||||
</div>
|
||||
|
||||
<div id="content_trigger" class="default_invisible">
|
||||
<img
|
||||
src="./img/cibler_adjascent_avance.jpg"
|
||||
alt="cat_1" />
|
||||
</div>
|
||||
|
||||
<div id="second_trigger" class="default_invisible">
|
||||
<img
|
||||
src="./img/cibler_adjascent_avance_second.png"
|
||||
alt="cat_2" />
|
||||
</div>
|
||||
|
||||
<div id="last_trigger" class="default_invisible">
|
||||
<img
|
||||
src="./img/cibler_adjascent_avance_last.jpg"
|
||||
alt="cat_3" />
|
||||
|
||||
<span class="sub_child default_invisible">
|
||||
<img
|
||||
src="./img/cibler_adjascent_avance_last_alt.jpg"
|
||||
alt="cat_4" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="trigger_oublie" class="default_invisible">
|
||||
<img
|
||||
src="./img/cibler_adjascent_avance_last_oublie.jpg"
|
||||
alt="cat_5" />
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,30 @@
|
||||
* {
|
||||
color: blue
|
||||
}
|
||||
p {
|
||||
color: green;
|
||||
}
|
||||
#alt_saison,
|
||||
#popoesie u#soleils {
|
||||
display: none;
|
||||
}
|
||||
/* cibler li + tout les éléments qui sont dedans*/
|
||||
li.poem,
|
||||
li.poem * {
|
||||
color:#000;
|
||||
}
|
||||
/* cibler u et i */
|
||||
li.poem u,
|
||||
li.poem i {
|
||||
color: rgb(15, 126, 82);
|
||||
}
|
||||
/* avec la condition :is on cible <u> ou <i> présent dans li.poem
|
||||
... pratique, on fait une pierre deux coups ! */
|
||||
li.poem *:is(u,i) {
|
||||
color: rgb(81, 39, 247);
|
||||
padding: 3px 8px 3px 5px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
#popoesie * { background: cyan; }
|
||||
#popoesie *:hover { background: yellow; }
|
||||
@@ -0,0 +1,70 @@
|
||||
/* neasting, ce qui est à l'intérieur (plus bas)...
|
||||
cible l'élément s'il est présent dans #margin_please (enfant) */
|
||||
#padding_project {
|
||||
div {
|
||||
border: 5px solid red;
|
||||
border-width: 6px 1px 6px 1px;
|
||||
border-color: red orange green blue;
|
||||
|
||||
margin: 10px 0px; /* top et bottom == 10px ; left et right == 0px ; */
|
||||
}
|
||||
|
||||
|
||||
#padding_all { /* neasting */
|
||||
padding: 10px; /* affecte #padding_all */
|
||||
border: 2px dashed blue;
|
||||
|
||||
/* grâce au neasting, je n'ai pas à présiser que le parent est #padding_all */
|
||||
/* div#padding_all div { */
|
||||
/* ici toute div enfant de #padding_all est ciblée / affectée */
|
||||
div {
|
||||
margin: 60px 0px; /* top et bottom == 60px ; left et right == 0px ; */
|
||||
}
|
||||
div#sub_wrapper {
|
||||
padding: 10px;
|
||||
border-color: yellow;
|
||||
border-width: 10px;
|
||||
}
|
||||
.inline {
|
||||
border-color: #000;
|
||||
border-width: 1px 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
/* ici :not permet de ne pas affecter certaines div avec la class .no_margin */
|
||||
div:not(.no_margin) {
|
||||
margin: 30px 40px; /* top et bottom == 30px ; left et right == 40px ; */
|
||||
}
|
||||
/* cela évite d'avoir à écrire une nouvelle instruction spécifique, affectant .no_margin */
|
||||
/* .no_margin {
|
||||
margin:0
|
||||
} */
|
||||
}
|
||||
|
||||
#padding_left {
|
||||
padding-left: 30px;
|
||||
}
|
||||
#padding_top {
|
||||
padding-top: 30px;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
#padding_right {
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.laterales { /* blocs au début et fin, meme classe */
|
||||
width: 20%;
|
||||
}
|
||||
.boxfix {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
background: #FFF;
|
||||
}
|
||||
.padding_color {
|
||||
background-color: #e3dcff ;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
p {}
|
||||
61
public/codes/all/data/mhw8ac7rzxui2vbb6t_cibler_is_not.css
Normal file
61
public/codes/all/data/mhw8ac7rzxui2vbb6t_cibler_is_not.css
Normal file
@@ -0,0 +1,61 @@
|
||||
li:is(.active, .superactive, .neversleep) {
|
||||
background-color: red;
|
||||
}
|
||||
li.active [data-etat="busy"] {
|
||||
background-color: orange;
|
||||
}
|
||||
li:not(.active) {
|
||||
background-color: cyan;
|
||||
}
|
||||
/* tout élément présent dan li...
|
||||
... qui possède l'ttribut "data-etat" */
|
||||
li [data-etat] {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
li {
|
||||
font-style: italic;
|
||||
/* grâce au neasting... */
|
||||
/* ... les spans contenues dans .state sont ciblées ainsi :
|
||||
... sans neasting on autait écrit :
|
||||
... li.state
|
||||
*/
|
||||
.state {
|
||||
border-left: 15px solid pink;
|
||||
|
||||
/* & indique indique qu'on cible l'élément avec une class "state"
|
||||
.... et (+) un attribut (ou autre propriété tel .exemple)
|
||||
Si li.state a un attribut "data-etat" =égal à= "sleeping" ...
|
||||
... sans neasting on autait écrit :
|
||||
... li.state[data-etat="sleeping"]
|
||||
*/
|
||||
&.exemple, /* , affect si a la class OU l'attribut... */
|
||||
&[data-etat="sleeping"],
|
||||
&:is([data-etat="sleeping"],[data-etat="sleep"])
|
||||
/* ... cumul de conditions pouvant être remplies
|
||||
pour que cette instruction CSS soit remplie */
|
||||
{
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* si une li "possède/contient" == :has(x_condition) */
|
||||
/* alors li en question (parent.e) est affectée/ciblée*/
|
||||
/* ... ici, si li contient un element enfant...
|
||||
...... dont l'attribut est data-etat="sleeping"
|
||||
........ elle a un autre background */
|
||||
li:has([data-etat="sleeping"]) {
|
||||
opacity: 1s;
|
||||
background: #8080805e;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
|
||||
li:last-of-type {
|
||||
border-bottom: 3px solid blue;
|
||||
}
|
||||
li:nth-child(3) {
|
||||
border: 5px solid pink;
|
||||
}
|
||||
/* https://css-tricks.com/examples/nth-child-tester/ */
|
||||
5
public/codes/all/data/mhw8ac7rzxui2vbb6t_tuto.css
Normal file
5
public/codes/all/data/mhw8ac7rzxui2vbb6t_tuto.css
Normal file
@@ -0,0 +1,5 @@
|
||||
/* Modifier le CSS */
|
||||
p {
|
||||
color: blue;
|
||||
margin: 0;
|
||||
}
|
||||
5
public/codes/all/data/mhw8wbjbx43prp2z6ms_tuto.css
Normal file
5
public/codes/all/data/mhw8wbjbx43prp2z6ms_tuto.css
Normal file
@@ -0,0 +1,5 @@
|
||||
/* Modifier le CSS */
|
||||
p {
|
||||
color: blue;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/* Ici on peut attitrer des valeurs à des variables */
|
||||
/* on peut utiliser ces variables plusieures fois dans le CSS */
|
||||
/* Ici on va assigner cette variable à tous les éléments */
|
||||
/* normalement on utilise plutôt :root */
|
||||
* {
|
||||
--element_width: 200px !important;
|
||||
}
|
||||
#mousehover_movemargin_element {
|
||||
width: var(--element_width);
|
||||
height: 200px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
background: red;
|
||||
color: #FFF;
|
||||
}
|
||||
#mousehover_movemargin:hover #mousehover_movemargin_element {
|
||||
background:yellow;
|
||||
color: #000;
|
||||
|
||||
/*
|
||||
calc permet de calculer
|
||||
(adition +, soustraction -, multiplication *, ....
|
||||
Ici on veut que la marge à gauche soit de :
|
||||
100%
|
||||
-130px
|
||||
-70px ( == 200px )
|
||||
( la largeur "width" de #mousehover_movemargin_element )
|
||||
*/
|
||||
margin-left: calc(100% - 130px - 70px);
|
||||
/* On peut faire plus simple en utiisant la variable */
|
||||
/* Ainsi, si on la modifie, dans * ...
|
||||
... la largeur de #mousehover_movemargin_element
|
||||
... ainsi que la marge-left ici...
|
||||
..... vont être affectées
|
||||
Si je veux changer la lageure+margin-left ici
|
||||
... je n'ai plus qu'à changer --element_width dans * !!!
|
||||
*/
|
||||
margin-left: dcalc(100% - var(--element_width)); /* 100% - 200px */
|
||||
|
||||
|
||||
/* https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/transition*/
|
||||
/* all pour affecter toutes les propriétés CSS */
|
||||
/* transition: all 1s; */
|
||||
transition:
|
||||
margin-left 5s ease-in-out 0s,
|
||||
color 2s ease-in-out 0s;
|
||||
cursor: pointer;
|
||||
}
|
||||
5
public/codes/all/data/mhyj112vkkmogauj84_tuto.css
Normal file
5
public/codes/all/data/mhyj112vkkmogauj84_tuto.css
Normal file
@@ -0,0 +1,5 @@
|
||||
/* Modifier le CSS */
|
||||
p {
|
||||
color: blue;
|
||||
margin: 0;
|
||||
}
|
||||
4
public/codes/all/data/mhyj112vkkmogauj84_tuto.page
Normal file
4
public/codes/all/data/mhyj112vkkmogauj84_tuto.page
Normal file
@@ -0,0 +1,4 @@
|
||||
<!-- Modifier l'HTML -->
|
||||
<p>
|
||||
Modifier le text ici
|
||||
</p>
|
||||
@@ -0,0 +1,7 @@
|
||||
#wrap_p_easy p {
|
||||
text-decoration: underline;
|
||||
font-size: 20px;
|
||||
margin: 0;
|
||||
color: red;
|
||||
line-height: 1.9em;
|
||||
}
|
||||
6
public/codes/all/data/mhyn3t3mqs39lk6jyv9_tuto.css
Normal file
6
public/codes/all/data/mhyn3t3mqs39lk6jyv9_tuto.css
Normal file
@@ -0,0 +1,6 @@
|
||||
/* Modifier le CSS */
|
||||
p {
|
||||
color: blue;
|
||||
margin: 0;
|
||||
|
||||
}
|
||||
3
public/codes/all/data/mhyn3t3mqs39lk6jyv9_tuto.page
Normal file
3
public/codes/all/data/mhyn3t3mqs39lk6jyv9_tuto.page
Normal file
@@ -0,0 +1,3 @@
|
||||
<!-- Modifier l'HTML -->
|
||||
<p>
|
||||
Modifier le coucou</p>
|
||||
@@ -0,0 +1,49 @@
|
||||
/* Ici on peut attitrer des valeurs à des variables */
|
||||
/* on peut utiliser ces variables plusieures fois dans le CSS */
|
||||
/* Ici on va assigner cette variable à tous les éléments */
|
||||
/* normalement on utilise plutôt :root */
|
||||
* {
|
||||
--element_width: 300px!important;
|
||||
}
|
||||
#mousehover_movemargin_element {
|
||||
width: var(--element_width);
|
||||
height: 200px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
background: red;
|
||||
color: #FFF;
|
||||
}
|
||||
#mousehover_movemargin:hover #mousehover_movemargin_element {
|
||||
background :blue;
|
||||
color: #000;
|
||||
|
||||
/*
|
||||
calc permet de calculer
|
||||
(adition +, soustraction -, multiplication *, ....
|
||||
Ici on veut que la marge à gauche soit de :
|
||||
100%
|
||||
-130px
|
||||
-70px ( == 200px )
|
||||
( la largeur "width" de #mousehover_movemargin_element )
|
||||
*/
|
||||
margin-left: calc(100% - 130px - 70px);
|
||||
/* On peut faire plus simple en utiisant la variable */
|
||||
/* Ainsi, si on la modifie, dans * ...
|
||||
... la largeur de #mousehover_movemargin_element
|
||||
... ainsi que la marge-left ici...
|
||||
..... vont être affectées
|
||||
Si je veux changer la lageure+margin-left ici
|
||||
... je n'ai plus qu'à changer --element_width dans * !!!
|
||||
*/
|
||||
margin-left: calc(100% - var(--element_width)); /* 100% - 200px */
|
||||
|
||||
|
||||
/* https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/transition*/
|
||||
/* all pour affecter toutes les propriétés CSS */
|
||||
/* transition: all 1s; */
|
||||
transition:
|
||||
margin-left 3s ease-in-out 0s,
|
||||
color 1s ease-in-out 0s;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
* {
|
||||
color: blue;
|
||||
}
|
||||
p {
|
||||
color: blue;
|
||||
}
|
||||
a ,
|
||||
.poem.last span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#alt_saison,
|
||||
#popoesie u#soleils {
|
||||
display: inline;
|
||||
}
|
||||
#saisons span:not(#alt_saison){
|
||||
display: none;
|
||||
}
|
||||
/* cibler li + tout les éléments qui sont dedans*/
|
||||
li.poem,
|
||||
li.poem * {
|
||||
color:#000;
|
||||
}
|
||||
/* cibler u et i */
|
||||
li.poem u,
|
||||
li.poem i {
|
||||
color: blue;
|
||||
}
|
||||
/* avec la condition :is on cible <u> ou <i> présent dans li.poem
|
||||
... pratique, on fait une pierre deux coups ! */
|
||||
li.poem *:is(u,i) {
|
||||
color: rgb(81, 39, 247);
|
||||
padding: 0px 0px 0px 0px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
#popoesie * { background: cyan; }
|
||||
#popoesie *:hover { background: green; }
|
||||
@@ -0,0 +1,90 @@
|
||||
/* neasting, ce qui est à l'intérieur (plus bas)...
|
||||
cible l'élément s'il est présent dans #margin_please (enfant) */
|
||||
#padding_project {
|
||||
div {
|
||||
border: 3px solid red;
|
||||
border-width: 6px 1px 6px 1px;
|
||||
border-color: red orange green blue;
|
||||
|
||||
margin: 10px 0px; /* top et bottom == 10px ; left et right == 0px ; */
|
||||
}
|
||||
|
||||
#padding_top {
|
||||
padding: 30px;
|
||||
width :400px;
|
||||
tex-align:center;
|
||||
}
|
||||
#padding_left {
|
||||
padding:10px;
|
||||
width :400p;
|
||||
tex-align:center;
|
||||
}
|
||||
#padding_right {
|
||||
padding:10px;
|
||||
width :400px;
|
||||
tex-align:center;
|
||||
}
|
||||
#padding_bottom {
|
||||
padding:20px;
|
||||
width :400px;
|
||||
tex-align:center;
|
||||
}
|
||||
|
||||
#padding_all { /* neasting */
|
||||
padding: 10px; /* affecte #padding_all */
|
||||
border: 2px dashed blue;
|
||||
|
||||
/* grâce au neasting, je n'ai pas à présiser que le parent est #padding_all */
|
||||
/* div#padding_all div { */
|
||||
/* ici toute div enfant de #padding_all est ciblée / affectée */
|
||||
div {
|
||||
margin: 60px 0px; /* top et bottom == 60px ; left et right == 0px ; */
|
||||
}
|
||||
div#sub_wrapper {
|
||||
padding: 10px;
|
||||
border-color: yellow;
|
||||
border-width: 10px;
|
||||
}
|
||||
.inline {
|
||||
border-color: #000;
|
||||
border-width: 1px 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
/* ici :not permet de ne pas affecter certaines div avec la class .no_margin */
|
||||
div:not(.no_margin) {
|
||||
margin: 30px 40px; /* top et bottom == 30px ; left et right == 40px ; */
|
||||
}
|
||||
/* cela évite d'avoir à écrire une nouvelle instruction spécifique, affectant .no_margin */
|
||||
/* .no_margin {
|
||||
margin:0
|
||||
} */
|
||||
}
|
||||
|
||||
#padding_left {
|
||||
padding-left: 30px;
|
||||
}
|
||||
#padding_top {
|
||||
padding-top: 30px;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
#padding_right {
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.laterales { /* blocs au début et fin, meme classe */
|
||||
width: 20%;
|
||||
}
|
||||
.boxfix {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
background: #FFF;
|
||||
}
|
||||
.padding_color {
|
||||
background-color: #e3dcff ;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
p {
|
||||
text-decoration: underline;
|
||||
color:blue;
|
||||
font-size:18px;
|
||||
margin:0;
|
||||
}
|
||||
span{
|
||||
background:green;
|
||||
}
|
||||
|
||||
#wrap_p_easy p span span {
|
||||
|
||||
}
|
||||
.last_p.important {
|
||||
font-style: italic;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
span span {
|
||||
COLOR;
|
||||
}
|
||||
p .important {
|
||||
color: red;
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
* {
|
||||
color: red
|
||||
}
|
||||
p {
|
||||
color: green;
|
||||
}
|
||||
|
||||
#saisons span:first-of-type,
|
||||
a,
|
||||
.poem.last span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
:is(p,u,li){
|
||||
padding: 0px 0px 0px 0px;
|
||||
margin: 0px 0px 0px 0px;
|
||||
}
|
||||
|
||||
/* cibler li + tout les éléments qui sont dedans*/
|
||||
li.poem,
|
||||
li.poem * {
|
||||
color:#000;
|
||||
}
|
||||
/* cibler u et i */
|
||||
li.poem u,
|
||||
li.poem i {
|
||||
color: rgb(15, 126, 82);
|
||||
}
|
||||
/* avec la condition :is on cible <u> ou <i> présent dans li.poem
|
||||
... pratique, on fait une pierre deux coups ! */
|
||||
li.poem *:is(u,i) {
|
||||
color: green;
|
||||
padding: 3px 8px 3px 5px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#popoesie * { background: cyan; }
|
||||
#popoesie *:hover { background: yellow; }
|
||||
@@ -0,0 +1,73 @@
|
||||
/* neasting, ce qui est à l'intérieur (plus bas)...
|
||||
cible l'élément s'il est présent dans #margin_please (enfant) */
|
||||
#padding_project {
|
||||
div {
|
||||
border: 3px solid red;
|
||||
border-width: 6px 1px 6px 1px;
|
||||
border-color: red orange green blue;
|
||||
|
||||
margin: 10px 0px; /* top et bottom == 10px ; left et right == 0px ; */
|
||||
}
|
||||
|
||||
|
||||
#padding_all { /* neasting */
|
||||
padding: 10px; /* affecte #padding_all */
|
||||
border: 2px dashed blue;
|
||||
|
||||
/* grâce au neasting, je n'ai pas à présiser que le parent est #padding_all */
|
||||
/* div#padding_all div { */
|
||||
/* ici toute div enfant de #padding_all est ciblée / affectée */
|
||||
div {
|
||||
margin: 60px 0px; /* top et bottom == 60px ; left et right == 0px ; */
|
||||
}
|
||||
div#sub_wrapper {
|
||||
padding: 10px;
|
||||
border-color: yellow;
|
||||
border-width: 10px;
|
||||
}
|
||||
.inline {
|
||||
border-color: #000;
|
||||
border-width: 1px 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
/* ici :not permet de ne pas affecter certaines div avec la class .no_margin */
|
||||
div:not(.no_margin) {
|
||||
margin: 30px 40px; /* top et bottom == 30px ; left et right == 40px ; */
|
||||
}
|
||||
/* cela évite d'avoir à écrire une nouvelle instruction spécifique, affectant .no_margin */
|
||||
/* .no_margin {
|
||||
margin:0
|
||||
} */
|
||||
}
|
||||
|
||||
#padding_left {
|
||||
padding-left: 10px;
|
||||
}
|
||||
#padding_top {
|
||||
padding-top: 30px;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
#padding_right {
|
||||
padding-right:10px;
|
||||
}
|
||||
#padding_bottom {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.laterales { /* blocs au début et fin, meme classe */
|
||||
width: 20%;
|
||||
}
|
||||
.boxfix {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
background: #FFF;
|
||||
}
|
||||
.padding_color {
|
||||
background-color: #e3dcff ;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
/* Modifier le CSS ici */
|
||||
|
||||
#wrap_p_easy span span {
|
||||
|
||||
color: red;
|
||||
Font-size: 13;
|
||||
Font-style: italic;
|
||||
text-decoration: underline;
|
||||
text-decoration-style: dotted;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.last_p.important {
|
||||
|
||||
color: blue;
|
||||
font-style: oblique;
|
||||
|
||||
}
|
||||
5
public/codes/all/data/mhyommdfj1c3onihsh_tuto.css
Normal file
5
public/codes/all/data/mhyommdfj1c3onihsh_tuto.css
Normal file
@@ -0,0 +1,5 @@
|
||||
/* Modifier le CSS */
|
||||
p {
|
||||
color: blue;
|
||||
margin: 0;
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/* Ici on peut attitrer des valeurs à des variables */
|
||||
/* on peut utiliser ces variables plusieures fois dans le CSS */
|
||||
/* Ici on va assigner cette variable à tous les éléments */
|
||||
/* normalement on utilise plutôt :root */
|
||||
* {
|
||||
--element_width: 200px !important;
|
||||
}
|
||||
#mousehover_movemargin_element {
|
||||
width: var(--element_width);
|
||||
height: 200px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
background: red;
|
||||
color: #FFF;
|
||||
}
|
||||
#mousehover_movemargin:hover #mousehover_movemargin_element {
|
||||
background:yellow;
|
||||
color: #000;
|
||||
|
||||
/*
|
||||
calc permet de calculer
|
||||
(adition +, soustraction -, multiplication *, ....
|
||||
Ici on veut que la marge à gauche soit de :
|
||||
100%
|
||||
-130px
|
||||
-70px ( == 200px )
|
||||
( la largeur "width" de #mousehover_movemargin_element )
|
||||
*/
|
||||
margin-left: calc(100% - 130px - 70px);
|
||||
/* On peut faire plus simple en utiisant la variable */
|
||||
/* Ainsi, si on la modifie, dans * ...
|
||||
... la largeur de #mousehover_movemargin_element
|
||||
... ainsi que la marge-left ici...
|
||||
..... vont être affectées
|
||||
Si je veux changer la lageure+margin-left ici
|
||||
... je n'ai plus qu'à changer --element_width dans * !!!
|
||||
*/
|
||||
margin-left: calc(100% - var(--element_width)); /* 100% - 200px */
|
||||
|
||||
|
||||
/* https://developer.mozilla.org/fr/docs/Web/CSS/Reference/Properties/transition*/
|
||||
/* all pour affecter toutes les propriétés CSS */
|
||||
/* transition: all 1s; */
|
||||
transition:
|
||||
margin-left 5s ease-in-out 0s,
|
||||
color 2s ease-in-out 0s;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
* {
|
||||
color: red
|
||||
}
|
||||
p {ddd
|
||||
color: green;
|
||||
}
|
||||
#alt_saison,
|
||||
#popoesie u#soleils {
|
||||
display: none;
|
||||
}
|
||||
/* cibler li + tout les éléments qui sont dedans*/
|
||||
li.poem,
|
||||
li.poem * {
|
||||
color:#000;
|
||||
}
|
||||
/* cibler u et i */
|
||||
li.poem u,
|
||||
li.poem i {
|
||||
color: rgb(15, 126, 82);
|
||||
}
|
||||
/* avec la condition :is on cible <u> ou <i> présent dans li.poem
|
||||
... pratique, on fait une pierre deux coups ! */
|
||||
li.poem *:is(u,i) {
|
||||
color: rgb(81, 39, 247);
|
||||
padding: 3px 8px 3px 5px;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
#popoesie * { background: cyan; }
|
||||
#popoesie *:hover { background: yellow; }
|
||||
@@ -0,0 +1,70 @@
|
||||
/* neastzzzzing, ce qui est à l'intérieur (plus bas)...
|
||||
cible l'élément s'il est présent dans #margin_please (eddnfant) */
|
||||
#padding_project {
|
||||
div {
|
||||
border: 3px solid red;
|
||||
border-width: 6px 1px 6px 1px;
|
||||
border-color: red orange green blue;
|
||||
|
||||
margin: 10px 0px; /* top et bottom == 10px ; left et right == 0px ; */
|
||||
}
|
||||
|
||||
|
||||
#padding_all { /* neasting */dd
|
||||
padding: 10px; /* affecte #padding_all */
|
||||
border: 2px dashed blue;
|
||||
|
||||
/* grâce au neasting, je n'ai pas à présiser que le parent est #padding_all */
|
||||
/* div#padding_all div { */
|
||||
/* ici toute div enfant de #padding_all est ciblée / affectée */
|
||||
div {
|
||||
margin: 60px 0px; /* top et bottom == 60px ; left et right == 0px ; */
|
||||
}
|
||||
div#sub_wrapper {
|
||||
padding: 10px;
|
||||
border-color: yellow;
|
||||
border-width: 10px;
|
||||
}
|
||||
.inline {
|
||||
border-color: #000;
|
||||
border-width: 1px 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
/* ici :not permet de ne pas affecter certaines div avec la class .no_margin */
|
||||
div:not(.no_margin) {
|
||||
margin: 30px 40px; /* top et bottom == 30px ; left et right == 40px ; */
|
||||
}
|
||||
/* cela évite d'avoir à écrire une nouvelle instruction spécifique, affectant .no_margin */
|
||||
/* .no_margin {
|
||||
margin:0
|
||||
} */
|
||||
}
|
||||
|
||||
#padding_left {
|
||||
padding-left: 30px;
|
||||
}
|
||||
#padding_top {
|
||||
padding-top: 30px;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
#padding_right {
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.laterales { /* blocs au début et fin, meme classe */
|
||||
width: 20%;
|
||||
}
|
||||
.boxfix {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
background: #FFF;
|
||||
}
|
||||
.padding_color {
|
||||
background-color: #e3dcff ;
|
||||
}
|
||||
}
|
||||
61
public/codes/all/data/mi0gp5x7bxqq0cy0l5a_cibler_is_not.css
Normal file
61
public/codes/all/data/mi0gp5x7bxqq0cy0l5a_cibler_is_not.css
Normal file
@@ -0,0 +1,61 @@
|
||||
li:is(.active, .superactive, .neversleep) {
|
||||
background-color: red;
|
||||
}zzz
|
||||
li.active [data-etat="busy"] {
|
||||
background-color: orange;
|
||||
}
|
||||
li:not(.active) {
|
||||
background-color: cyan;
|
||||
}
|
||||
/* tout élément présent dan li...
|
||||
... qui possède l'ttribut "data-etat" */
|
||||
li [data-etat] {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
li {
|
||||
font-style: italic;
|
||||
/* grâce au neasting... */
|
||||
/* ... les spans contenues dans .state sont ciblées ainsi :
|
||||
... sans neasting on autait écrit :
|
||||
... li.state
|
||||
*/
|
||||
.state {
|
||||
border-left: 15px solid pink;
|
||||
|
||||
/* & indique indique qu'on cible l'élément avec une class "state"
|
||||
.... et (+) un attribut (ou autre propriété tel .exemple)
|
||||
Si li.state a un attribut "data-etat" =égal à= "sleeping" ...
|
||||
... sans neasting on autait écrit :
|
||||
... li.state[data-etat="sleeping"]
|
||||
*/
|
||||
&.exemple, /* , affect si a la class OU l'attribut... */
|
||||
&[data-etat="sleeping"],
|
||||
&:is([data-etat="sleeping"],[data-etat="sleep"])
|
||||
/* ... cumul de conditions pouvant être remplies
|
||||
pour que cette instruction CSS soit remplie */
|
||||
{
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* si une li "possède/contient" == :has(x_condition) */
|
||||
/* alors li en question (parent.e) est affectée/ciblée*/
|
||||
/* ... ici, si li contient un element enfant...
|
||||
...... dont l'attribut est data-etat="sleeping"
|
||||
........ elle a un autre background */
|
||||
li:has([data-etat="sleeping"]) {
|
||||
opacity: 1;
|
||||
background: #8080805e;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
|
||||
li:last-of-type {
|
||||
border-bottom: 3px solid blue;
|
||||
}
|
||||
li:nth-child(3) {
|
||||
border: 5px solid pink;
|
||||
}
|
||||
/* https://css-tricks.com/examples/nth-child-tester/ */
|
||||
@@ -0,0 +1 @@
|
||||
/* Modifier le CSS ici */
|
||||
5
public/codes/all/data/mi0gxzihcahf66f40mw_tuto.css
Normal file
5
public/codes/all/data/mi0gxzihcahf66f40mw_tuto.css
Normal file
@@ -0,0 +1,5 @@
|
||||
/* Modifier le CSS */
|
||||
p {ee
|
||||
color: red;
|
||||
margin: 0;
|
||||
}
|
||||
BIN
public/codes/all/img/03902b7b.png
Normal file
BIN
public/codes/all/img/03902b7b.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 865 KiB |
BIN
public/codes/all/img/cibler_adjascent_avance.jpg
Normal file
BIN
public/codes/all/img/cibler_adjascent_avance.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
BIN
public/codes/all/img/cibler_adjascent_avance_last.jpg
Normal file
BIN
public/codes/all/img/cibler_adjascent_avance_last.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
public/codes/all/img/cibler_adjascent_avance_last_alt.jpg
Normal file
BIN
public/codes/all/img/cibler_adjascent_avance_last_alt.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
public/codes/all/img/cibler_adjascent_avance_last_oublie.jpg
Normal file
BIN
public/codes/all/img/cibler_adjascent_avance_last_oublie.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 185 KiB |
BIN
public/codes/all/img/cibler_adjascent_avance_second.png
Normal file
BIN
public/codes/all/img/cibler_adjascent_avance_second.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 407 KiB |
BIN
public/codes/all/img/cibler_has_checked_champignons.jpg
Normal file
BIN
public/codes/all/img/cibler_has_checked_champignons.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 321 KiB |
BIN
public/codes/all/img/cibler_has_checked_foret.jpg
Normal file
BIN
public/codes/all/img/cibler_has_checked_foret.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 326 KiB |
BIN
public/codes/all/img/tuto.png
Executable file
BIN
public/codes/all/img/tuto.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
BIN
public/codes/all/img/tuto_box.png
Executable file
BIN
public/codes/all/img/tuto_box.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
5
public/codes/all/tuto.css
Normal file
5
public/codes/all/tuto.css
Normal file
@@ -0,0 +1,5 @@
|
||||
/* Modifier le CSS */
|
||||
p {
|
||||
color: red;
|
||||
margin: 0;
|
||||
}
|
||||
4
public/codes/all/tuto.page
Normal file
4
public/codes/all/tuto.page
Normal file
@@ -0,0 +1,4 @@
|
||||
<!-- Modifier l'HTML -->
|
||||
<p>
|
||||
Modifier le text
|
||||
</p>
|
||||
0
public/codes/all/tuto.result
Normal file
0
public/codes/all/tuto.result
Normal file
25
public/codes/all/tuto.txt
Normal file
25
public/codes/all/tuto.txt
Normal file
@@ -0,0 +1,25 @@
|
||||
En vert le CSS
|
||||
En orangé l'HTML
|
||||
En dessous le Rendu
|
||||
Ensuit une textarea ou expliquer les modifications apportées
|
||||
( vous pouvez indiquer "RAS" ou autre si le code parle de lui-même )
|
||||
( n'hésitez pas à ajouter un commentaire sur ce qui a été compliqué/trop dur )
|
||||
|
||||
En passant à la question suivante vos fichiers modifiés sont sauvegardés
|
||||
Mais vous pouvez aussi cliquer sur "sauvegarder" pour forcer la sauvegarde
|
||||
(un lien vers le fichier s'affichera)
|
||||
Ou cliquer sur télécharger (pour le récupérer)
|
||||
|
||||
Au début de la session un ID_unique est créé
|
||||
<b>Il faudra le noter lors de la dernière question...</b>
|
||||
<b>Il servira a retrouver/partager vos réponses !</b>
|
||||
( indiqué en haut de page )
|
||||
<img src="/codes/{sub_folder}/img/tuto.png">
|
||||
|
||||
( <a href="#unique-id-wrapper">en bas de page</a> on peut charger un questionnaire fini )
|
||||
( ou en page d'acceuille )
|
||||
<a href="#unique-id-wrapper"><img src="/codes/{sub_folder}/img/tuto_box.png"></a>
|
||||
|
||||
Le TOC permet d'aller d'une question à l'autre directement....
|
||||
<b>Mais, pour compléter le questionnaire...
|
||||
il faut répondre à toutes questions dans l'ordre...</b>
|
||||
Reference in New Issue
Block a user