html - can someone tell me the meaning of #id:checked~section{} in css3 -


I'm trying to create animated menus in the context of 'codepen', but I do not understand the code written below Coming out to me, for the first time I saw the code like this, it looks like a selector, but it helps to understand the HTML:

   & Lt; Ul class = "sidenav" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; I class = "fa-apple" & gt; & Lt; / I & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; I class = "fa-fa-window" & gt; & Lt; / I & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; I class = "fa-android" & gt; & Lt; / I & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; I class = "fa-tarbible" & gt; & Lt; / I & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; I class = "FA FA-tumbler" & gt; & Lt; / I & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; I class = "fa-gitub" & gt; & Lt; / I & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; I class = "fa-youtube-play" & gt; & Lt; / I & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; I class = "fa-drop-dropbox" & gt; & Lt; / I & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; I class = "fa-twitter" & gt; & Lt; / I & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; I class = "fa efeimio" & gt; & Lt; / I & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; I class = "fa-fi-skype" & gt; & Lt; / I & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt ;! - Content area - & gt; & Lt; Section & gt; & Lt ;! - Label for #tm checkbox - & gt; & Lt; Label = "tm" & gt; Menu & lt; / Label & gt; & Lt; / Section & gt;  

  # id: checked ~ section {}  

This means that the check box is checked if the check box is checked, then its section (s) should have the following properties

Tilde (~) is a common brother coordinator

Check this

for more information

Comments

Popular posts from this blog

sqlite3 - UPDATE a table from the SELECT of another one -

c# - Showing a SelectedItem's Property -

javascript - Render HTML after each iteration in loop -