之前使用過 :not() 覺得超級的實用，例如：選取所有checkbox 狀態是沒被打勾的。今天要來學習使用 :has().

相關文章

• :has()
  https://developer.mozilla.org/zh-CN/docs/Web/CSS/:has
• CSS :has() Pseudo-class
  https://www.w3schools.com/cssref/sel_has.php
• :has() 個案研究
  https://developer.chrome.com/blog/css-ui-ecommerce-has?hl=zh-tw
• How to Use the :has() Selector in CSS
  https://www.freecodecamp.org/news/how-to-use-the-has-selector-in-css/

影片：Learn CSS :not() and :has() selector in 6 Minutes
https://www.youtube.com/watch?v=-pQZLQakz-c

滿神奇的，居然完全沒使用 javascript 就到過 filter 功能。

異常情況, 是無法產生 scrollbar, 畫面變超大,

努力地研究 tabulator 官方文件, 也看不出所以然:
https://tabulator.info/docs/5.5/layout#fittowidth

手動調整 tabulator 的 table width:100% 也無解.

產成的原因:

某一個爸爸 div 讓 tabulator 繼承到 display: grid; 而且上層又是用 flex, 交叉使用就掛掉.

解法1: 避開 grid 就OK了.

解法2: 在 tabulator 的上層設成 display: grid 居然也行, 真太神奇了, 呵呵.

解法:
https://getbootstrap.com/docs/5.0/utilities/flex/

<div class="d-flex justify-content-end">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

直接下 justify-content-end , 沒有效果,

使用 text-right 也失敗:
https://getbootstrap.com/docs/4.0/utilities/text/

<p class="text-right">Right aligned text on all viewport sizes.</p>

我實際執行畫面：

原本的 css selector 是寫 tr.status_tr 但是，會連 Soldout 也一起被選到，改用 tr[class=’status_tr’] 就解決了，沒有使用到 :NOT().

在網路上學習 css selector 的語法，想套用看看，例如我想試的是NOT 的用法：
https://www.geeksforgeeks.org/how-to-use-a-not-equal-css-attribute-selector/

相關討論：Can’t find a “not equal” css attribute selector
https://stackoverflow.com/questions/25287229/cant-find-a-not-equal-css-attribute-selector

One problem with the accepted answer is that it will also select elements that do not have a foo attribute at all. Consider:

<div>No foo</div>
<div foo="">Empty foo</div>
<div foo="x">XXX</div>
<div foo="y">YYY</div>
<div foo="z">ZZZ</div>

div:not([foo='']) will select both the first and second div elements. If you only want div elements that have an attribute foo that is set to an empty string, you should use:

div[foo]:not([foo=''])

If you want all elements with attribute foo that is neither y nor z, you should use:

div[foo]:not([foo='y']):not([foo='z'])

bootstrap tabs template

使用下面的範例來修改:
https://colorlib.com/etc/bwiz/colorlib-wizard-30/index.html

實做的結果:

Step 1:

Step 2:

Step 3:

使用的 html:

<div id="form-total" role="application" class="form-register wizard clearfix">
	<div class="steps clearfix">
		<ul role="tablist">
			<li role="tab" aria-disabled="false" class="first current" aria-selected="true" id="your_table_nav_1">
				<div>
				<span class="title">1</span></div>
			</li>
			<li role="tab" aria-disabled="false" class="" aria-selected="true" id="your_table_nav_2">
				<div>
				<span class="title">2</span></div>
			</li>
			<li role="tab" aria-disabled="false" class="last" id="your_table_nav_3">
				<div>
				<span class="title">3</span></div>
			</li>
		</ul>
	</div>

	<div id="your_table_tab_1" class="">
                <div class="col-12">
                  <label for="your_table-field1-id" class="form-label">Field1</label>
                    <select class="form-select" aria-label="Default select" id="your_table-field1-id">
                    </select>
                </div>
	</div>
	<div id="your_table_tab_2" class="disappear">
                <div class="col-12">
                  <label for="your_table-field2-id" class="form-label">Field2</label>
                    <select class="form-select" aria-label="Default select" id="your_table-field2-id">
                    </select>
                </div>
                <div class="col-12">
                  <label for="your_table-field3-id" class="form-label">Field3</label>
                    <select class="form-select" aria-label="Default select" id="your_table-field3-id">
                    </select>
                </div>
	</div>
	<div id="your_table_tab_3" class="disappear">
                <div class="row">
	                <div class="col-3">
	                  <label class="form-label">User</label>
	                </div>
	                <div class="col">
	                  <div id="your_table-user_name-confirm"></div>
	                </div>
                </div>

                <div class="row">
	                <div class="col-3">
	                  <label class="form-label">Field1</label>
	                </div>
	                <div class="col">
	                  <div id="your_table-field1-confirm"></div>
	                </div>
                </div>

                <div class="row">
	                <div class="col-3">
	                  <label class="form-label">Field2</label>
	                </div>
	                <div class="col">
	                  <div id="your_table-field2-confirm"></div>
	                </div>
                </div>

                <div class="row">
	                <div class="col-3">
	                  <label class="form-label">Field3</label>
	                </div>
	                <div class="col">
	                  <div id="your_table-field3-confirm"></div>
	                </div>
                </div>
	</div>

</div>

下方的按鈕們:

<button type="button" class="btn btn-secondary disappear" id='your_table-btn-previous_1' onclick="javascript:your_table_previous_1();">
	<span>Previous</span>
</button>

<button type="button" class="btn btn-primary" id='your_table-btn-next_1' onclick="javascript:your_table_next_1();">
	<span>Next</span>
</button>

<button type="button" class="btn btn-secondary disappear" id='your_table-btn-previous_2' onclick="javascript:your_table_previous_2();">
	<span>Previous</span>
</button>

<button type="button" class="btn btn-primary" id='your_table-btn-next_2' onclick="javascript:your_table_next_2();">
	<span>Next</span>
</button>

使用的 css:

 .form-register .steps {
    margin-bottom: 33px;
    margin-top: 40px
}

.form-register .steps ul {
    display: flex;
    display: -webkit-flex;
    list-style: none;
    padding-left: 0;
    justify-content: center;
    -o-justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center
}

.form-register .steps li,.form-register .steps li.current {
    outline: none;
    -o-outline: none;
    -ms-outline: none;
    -moz-outline: none;
    -webkit-outline: none
}

.form-register .steps li div {
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background: #ccc;
    margin-right: 143px;
    position: relative;
    outline: none
}

.form-register .steps li div::before {
    position: absolute;
    content: "";
    background: #e5e5e5;
    width: 143px;
    height: 2px;
    top: 50%;
    transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    left: 100%
}

.form-register .steps li.last div {
    margin-right: 0
}

.form-register .steps li.last div::before {
    content: none
}

.form-register .steps li.current div
,.form-register .steps li.current div:active
,.form-register .steps li.done div::before
,.form-register .steps li.done div
,.form-register .steps li.done div:active {
    background: #3760e5
}

.form-register .steps li .current-info {
    display: none
}

.form-register .steps li .title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    font-family: montserrat,sans-serif
}

使用到的 javascript:

這段用來控制按鍵和區塊在切換時的顯示.

function switch_tab_step(table_name, active_at, tab_count) {
	for(let i=1; i<=tab_count; i++){
		$("#"+ table_name +"_nav_"+i).removeClass("current");
		$("#"+ table_name +"_nav_"+i).removeClass("done");
		
		if(i<active_at) {
			$("#"+ table_name +"_nav_"+i).addClass("done");
		}

		$("#"+ table_name +"_tab_"+i).addClass("disappear");

		$("#"+ table_name +"-btn-previous_"+i).addClass("disappear");
		$("#"+ table_name +"-btn-next_"+i).addClass("disappear");
	}

	$("#"+ table_name +"_nav_"+active_at).addClass("current");

	$("#"+ table_name +"_tab_"+active_at).removeClass("disappear");

	$("#"+ table_name +"-btn-previous_"+(active_at-1)).removeClass("disappear");
	$("#"+ table_name +"-btn-next_"+active_at).removeClass("disappear");
}

next 與 previous 的控制:

function your_table_next_1() {
	switch_tab_step('your_table',2,3);
}

function your_table_previous_1() {
	switch_tab_step('your_table',1,3);
}

function your_table_next_2() {
	switch_tab_step('your_table',3,3);
	
	// final step
    // your code here...
}

function your_table_previous_2() {
	switch_tab_step('your_table',2,3);
}

大致上, 這樣就可以做出 wizard 效果.

• addClass() – Adds one or more classes to the selected elements
• removeClass() – Removes one or more classes from the selected elements
• toggleClass() – Toggles between adding/removing classes from the selected elements
• css() – Sets or returns the style attribute

新增 class 範例:

$(“button”).click(function(){
  $(“div”).addClass(“important”);
});

移除 class 範例:

$(“button”).click(function(){
  $(“div”).removeClass(“blue”);
});

比較常見的是用切換某一個屬性, 可以用 toggle

$(“button”).click(function(){
  $(“h1, h2, p”).toggleClass(“blue”);
});

純 CSS 製作箭頭(arrow)
https://stackoverflow.max-everyday.com/2023/02/css-arrow/

服用下方的 css 可以產生這個左則三角型效果:

div.three:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  border-style: solid;
  border-width: 7px 0 7px 20px;
  border-color: transparent transparent transparent black;
  transform: translateY(-50%);
  left: -20px;
}

如果想調整為到上方, css 調整為:

  content: '';
  position: absolute;
  width: 0;
  height: 0;
  left: 50%;
  border-style: solid;
  border-width: 20px 7px 0px 7px;
  border-color: black transparent transparent transparent;
  transform: translateX(-50%);
  top: -20px;

左側的線, 可以用 after 來畫:

div.three:after {
    content: '';
    height: 1px;
    background: black;
    width: 75px;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    left: -76px;
    position: absolute;
    top: 50%;
}

如果想畫在上側, 可以使用:

    content: '';
    height: 50px;
    background: black;
    width: 1px;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    top: -66px;
    position: absolute;
    left: 50%;

CSS border-width 基本語法

分別設定四的邊框的寬度 border-width: 上邊框寬度 右邊框寬度 下邊框寬度 左邊框寬度;

Step 1) Add HTML:

Example

<p>Right arrow: <i class="arrow right"></i></p>
<p>Left arrow: <i class="arrow left"></i></p>
<p>Up arrow: <i class="arrow up"></i></p>
<p>Down arrow: <i class="arrow down"></i></p>

Step 2) Add CSS:

Example

.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}


.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

資料來源:
https://www.w3schools.com/howto/howto_css_arrows.asp

要畫正三角型, 向右的, 參考看看:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_shapes_triangle-right

css:

.triangle-right {
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-left: 50px solid #555;
	border-bottom: 25px solid transparent;
}

要畫出實心的三角型, 例如下圖:

在完全不設定 transparent 的情況下, border-width: 7px 0 7px 20px; 效果紅色的部份如下:

以結果上來看, 可以說:

• 要變尖的部份border-width:設為0, 底部滿的部份為 20px. 其他二側為 7px.
• 要變尖的部份border-color: black, 其餘為transparent

下面的css 比較笨, 是用向右來做旋轉:

.arrow2 {
  border: solid black;
  display: inline-block;
  border-style: solid;
  border-width: 7px 0 7px 20px;
  border-color: transparent transparent transparent black;
  transform: translateY(-50%);
}

.right2 {

}

.left2 {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

.up2 {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}

.down2 {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

資料來源

How to put arrow between two divs using html and css
https://stackoverflow.com/questions/45030914/how-to-put-arrow-between-two-divs-using-html-and-css?newreg=1cee82f737294b81935dadd5cdaee11c

比較神奇的畫線, 是這一個 github repo:
https://github.com/anseki/leader-line

CSS box-shadow 產生陰影效果或光暈效果的特性
https://boohover.pixnet.net/blog/post/35116159

我個人是最喜歡這2個效果：

手動來試看看：

學習css 的陰影 區塊1號

學習css 的陰影 區塊2號

哇！效果很好耶。

html:

<div class="panel panel-default">
 <div class="panel-heading">
 <h3 class="panel-title pull-left">
With short text it works great!
 </h3>
 <button class="btn btn-default pull-right">New</button>
 <div class="clearfix"></div>
 </div>
 <div class="panel-body">Panel content</div>
</div>

css:

.panel-heading h3 {
 font-weight: 400;
 width: 75%;
 padding-top: 8px;
 font-size: 14px;
}

資料來源：
http://jsfiddle.net/b2m38br9/1/