HTML CSS Selectors

This session was packed with fun times trying to make highlight.js work for this blog, as well as figuring out if whitespaces were coming from block elements or dividers. Anyhow.

Two things were covered:

Even more CSS selection methods
Fonts

Additional CSS Selectors:

Classes, ids, and types can also be relationally selected. Such as selecting everything with [*].

* {color:blue;}

Or selecting child types from parent types in the order [PARENT>CHILD]. Note the specificity of the selector, where a selector with a higher specificity takes precedence over a selectors with lower specificity.

p{color:violet;}

  ul > li > p{color:green;}

Proximity selections for objects ahead or behind a specified object can also be made with [+].

h1 + p {color:blue;}

  p + p {color:purple;}

Combined together, these selections can yield (ugly) results such as these:


<html>
<head>
    <style>
        h1{color:blue}
        h1 + p{background-color: lightcoral;}
        /* [id^='content_'] {font-size:5;} */
        ul {margin-bottom: 0; margin-block-start: 0;}
        #content_A > ul > li{border-style: solid; color: black; border-color: purple;}
        #content_B > ul > li{border-style: solid;color: purple; border-color: green;}
        #content_C > ul > li{border-style: solid;color:pink; border-color: yellow;}
    </style>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>selectorq1</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <script src='main.js'></script>
</head>
<body>
    <div id="container">
        <h1>프로그래밍 언어들</h1>
        <p>프로그래밍 언어들 대해서 <span style="color:lightpink">차근차근</span>...</p>
        <div id="main">
            <div id="content_A">
                <ul>
                    <li>
                        <h2>자바</h2>
                        <span>앱 개발이 모두 됨</span>
                    </li>
                </ul>
            </div>
            <div id="content_B">
                <ul>
                    <li>
                        <h2>파이썬</h2>
                        <span>머신러닝 등에 특화</span>
                    </li>
                </ul>
            </div>
            <div id="content_C">
                <ul>
                    <li>
                        <h2>C++</h2>
                        <span>게임개발에 특화</span>
                    </li>
                </ul>
                <!-- do not use div class, put class or id on li tag-->
            </div>
        </div>    
    </div>
</body>
</html>

Selections can also be made from tag properties:

h1[class] {color:blue;}

After selecting an object, virtual selectors can be used for additional effects.

/*
a:hover changes color while being moused over
*/
  a:hover {color:royalblue;}
/*
a:active changes color after being clicked
*/
  a:active{color:salmon;}
/*
a:link changes color after accessing the linked website
*/
  a:link {color:seagreen;}
/*
etc.
*/
  a:visited {color:yellow;}

There are some additional positional selectors in CSS:

.box:after{
    content: "select";
    color: green;
}
p:first-letter {font-size:300%;}
p {border-bottom: 1px dashed black;}
.box > p:last-child{border:none;}

And applying to subobjects without [>], provided the selection is nested within.

.box a:hover{color:gold;}

Finally, multiple selections:

p, ul {border: 1px solid blue;}

Fonts:

Multiple parameters exist to modify fonts in CSS:

body {font: 12px , Gulim;}
h1 {
    font-family: Impact;
    font-size: larger;
    font-weight: 200;
    font-style: italic;
    color: blue;
}
p {
    font: bold italic 15px , Gulim;
    color: chartreuse;
}

Finally, fonts can be imported locally or online, if the default font set is not enough.


<html>
<head>
    <style>
        /* use @import to make a selection of fonts available */
        @import url('https://fonts.googleapis.com/css2?family=Redressed&family=Roboto:wght@100&display=swap');
        .rob {
            font-family: 'Roboto', sans-serif;
        }

        .arl {
            font-family: 'Redressed', cursive;
        }
    </style>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script src='main.js'></script>
</head>
<body>
    <h1 class="rob">roboto</h1>
    <p class="rob">roboto roboto</p>
    <h1 class="arl">arial</h1>
    <p class="arl">arial arial</p>
</body>
</html>

-gonkgonk

HTML Form Tags and Groupings

HTML Floating Elements