CSS Pseudo Class and Elements

- 11月 23, 2019

3 divided box/ style="box-sizing: border-box;"

Left

Center

Right

CSS Layout float and clear

Top
Locate 1
Locate 2
Locate 3
Locate 4

To arrnge the text is centered, with <div>

 <div style="text-align: center; border: 3px solid green;">
 <p>To arrnge the text is centered, with <div></p>
    </div>

To arrnge the text is centered, with <p>

 <p style="text-align: center; border: 3px solid green;">To arrnge the text is centered, with <p></p>

center an image

set the width, set left and right margin to auto display: block;.

 <img src="https://imgur.com/wCnb1bo.png" alt="paris" style="width: 45%; margin-left: auto; margin-right: auto; display: block;">

style="position:absolute;" locating 100px left, width 300px. and padding 15px.

style="position:absolute;" locating 20px right, width 300px. and padding 15px.

center vertically

This text will be vertically centerd. With padding 50px <div> CSS

This text will be vertically centerd. with <p> inline-style margin-left: 10px;
padding: 50px 0px 50px 50px;
outline: 3px solid grren; outline-offset: 15px;

This <div> width="80%"

You can not background-color if <div> has position: absolute; property,entire<div>'s background.
But inside paragraph, if paragraph has position: absolute; property, you can background-color.

adding overflow: auto to containig(<div>) element, fix the problems.

to fit the image into this container, add overflow: auto; /clearfix (Pseudo?) class.

Is this vertical?
using inline-block if the text has multiple lines.

This text is vertically and horizantally centerd.
use inline-block, if the text has multiple lines.
And for to be centered text <div> has to have same height line-height and height property.

上の赤字がはみ出しているのは<div>内にstyleで直接指定したから。
緑字が枠に収まっているのは
単なる打ち間違い・タイプミスでした。style内のコロン : にすべきところがセミコロン ; となっていて<p> line-height が機能していなかった。
はみ出すとこんな感じに。

Is this vertical?
using inline-block if the text has multiple lines.

 <style>
 .middle {
   border: 3px solid green;
   text-align: center;
   line-height: 150px;
   height: 150px;
 }
</style>

~~とCSS設定しclassで呼び出しているから。~~
Center Vertically - Using line-height tutorialで、
<p>のdisplay: inline-block; をdisplay: inline; としても枠からはみ出す。

multiple lines 複数行ある場合、一つでも欠けると意図したものにならない。

 p {
  line-height:2;
  display: inline-block;
  vertical-align: middle;
  }

skew 斜めの ゆがんだ 曲がった 歪度
waffle あいまいな言葉を使う（態度を取る）
He waffled on the issue.
whiffle そよぐ、揺れる、定まらない、あれこれ変わる
descendant descendant descendant descendant descendant

Hover over here to show the p element

Tada! Here I am!

上のsimple tooltip hoverは全てCSSに書いてやらないと機能しなかった。inline-styleではダメだった。

serch bar などでフォーカスするとニュル～と伸びるやつ

Search:
6~24

::first-line pseudo element testing.
to add special style to the first line of a text.

change a paragraph, first-line element test.

Another test for first-line pseudo element.
text color checking.

 p.f::first-line {
     color:#ff0000;
     font-variant: small-caps;
     }
 p.f::first-letter {
           color:#0000ff;
           font-size: x-large;
                 }

p.f::firstline {} /p.f::first-letter とすることでp class="f" に限定。

change Selection background-color 選択中の文字を赤色に、背景色を薄黄色に。

 ::selection { color:red;
      background-color: lightyellow;
    }

 <style>
 a::after {content:attr(href);
              }
     </style>
     ~~~~~~~
     <a href="attribute's value">(W3Schools)</a>

(W3Schools)

The attr() property inserts a specialed attribute's value before or after the selecteted elements.

:first-of-type / :last-of-type / :nth-child()

:only-of-type selector is the only child of own's type in the parent.

 <style>
   p.o:first-of-type {
      background-color: lightpink;
       }
   p.o:last-of-type {
      background-color: violet;
       }
   p.o:only-of-type {
      background-color: red;
       }
   p.o:nth-child(2) {
      background-color: blue;
 }      
 </style>

only child of class="o" paragraph will be background-colored red.

this paragraph wiil be background-colored lightpink.

this paragraph will be background-colored blue.

this paragraph will be background-colored violet.

<br> を入れると2つ目と認識してくれず、blueにならない。

 <div style="background-color: #eee;">
 <p class="o">this paragraph wiil be background-colored lightpink.</p>
 <br>
 <p class="o">this paragraph will be background-colored blue.</p>
 <br>
 <p class="o">this paragraph will be background-colored violet.</p>
    </div>

this paragraph wiil be background-colored lightpink.

second also blue

third

fourth and last could be violet

this paragraph also wiil be background-colored red.

pseudo class :target and making tabs without javascript.

display: none; display: block;

<style>
 .tab div {
  display:none;
 }
 .tab div:target {
  display: block;
 }
</style>
<div class="tab">
 <a href="#link1">Link 1</a>
 <a href="#link2">Link 2</a>
 <a href="#link3">Link 3</a>

 <div id="link1">
  <h3>content to Link 1</h3>
  <p>Hi! link1</p>
 </div>

 <div id="link2">
  <h3>content to Link 2</h3>
  <p>Hi! link2</p>
 </div>

 <div id="link3">
  <h3>content to Link 3</h3>
  <p>Hi! link3</p>

Link 1 Link 2 Link 3

content to Link 1

Hi! link1

content to Link 2

Hi! link2

content to Link 3

Hi! link3

clearfix の練習

Transparent とbox-sizing: border-box; の練習

opacity: 0.2

opacity: 0.6

opacity: 0.8

opacity: 1.0

上のboxで重要(?)/苦労したところ↓

 <div style="background-color: lightgreen; clear:both; overflow: auto;">

 .box1 {
  box-sizing: border-box;
  width: 25%;
  float: left;
  border:1px dashed black;
  height:150px;
  line-height: 2em;
  display: inline-block;
  vertical-align: middle;
  padding: 25px;
 }
 p.box2 { text-align: center;
       font-size: 1.5em;
   }
 .box2:hover {
  opacity: 0.1;
 }

Tranparent opacity and RGBa

default

opacity and rgba are fixed

opacity and rgba are fixed first trial

<style>
div {
  background-color: rgb(76,175,80,);
  padding: 10px;
}

div.first {
  background: rgba(76, 175, 80, 0.1);
}

div.second {
  background: rgba(76, 175, 80, 0.3);
}

div.third {
  background: rgba(76, 175, 80, 0.6);
}
</style>
</head>
<body>

<h1>Transparent Box</h1>
<p>With opacity:</p>
<p style="background-color: lightgreen; opacity:0.1;">10% opacity</p>
<p style="background-color: lightgreen; opacity:0.3;">30% opacity</p>
<p style="background-color: lightgreen; opacity:0.6;">60% opacity</p>
<p style="background-color: lightgreen; opacity:1.0;">opacity 1</p>
<p>With RGBA color values:</p>
<div class="first">10% opacity</div>
<div class="second">30% opacity</div>
<div class="third">60% opacity</div>
<div style="background-color:  rgb(76,175,80);"><p>default</p></div>

Transparent Box

With opacity:

10% opacity

30% opacity

60% opacity

opacity 1

With RGBA color values:

10% opacity

30% opacity

60% opacity

default

下のhorizantal navにfloat: left; を使ったので<div>の枠に入るように overflow:auto を使う。

CSS navbar

<div style="border: 6px groove coral;
    overflow: auto;">

Navigation Bar

list-style-type:none; margin:0; padding:0;

vertical nav bar

<li 
style="height: 50px; 
 width: 120px; 
 text-align: center; 
 padding: 10px; 
 background-color: #bbb; 
 border: 1px solid black;">nav1
 </li>

nav1
nav2
nav3
nav4
nav5

horizantal nav:
<li> style="float:left; display: inline; width: 20%; text-align: center; padding: 15px; background-color: #bbb; border: 1px solid black;"

nav1
nav2
nav3
nav4
nav5

Top
Locate1
Locate2
Locate3

このブログを検索

覚え書き