position relative absolute opacity :hover cssSelector

วันนี้ศึกษา position relative absolute opacity :hover cssSelector

ถ้าเราจะใช้ position จำไว้ว่า absolute คือเอาวางไว้ตรงกลาง แบบซ้อนไว้ข้องในเป็นอีกเลเยอร์ แต่อันที่โดนทับ ต้องทำเป็น รีเรทีพ ก่อน ตลอด

ทำฟิล์มครอบรูป ครอบลิ้ง ใช้ opacity เปิดคราส แบบไหนก็ได้ เปิด tag ก็ได้ แล้วแต่ กำหนดเป็น 0.5 หรือไรก็ตาม เปลี่ยนสี โอปาซิตี้ใช้ backgound เฉยๆ


ถ้าเอาเม้าชี้ ใช้ โฮเวอ ใส่ cursur : pointer หรือไม่ก็ได้ แต่ใส่ก็ดี

อันสุดท้ายขอวันนี้  cssSelector

#container * {  border: 1px solid black; }

 ก็จะหมายความว่าเลือกทุก child ของ #container ให้มี border: 1px solid สีดำ

การรองรับ

• IE6+
• Firefox
• Chrome
• Safari
• Opera

#X #container {    width: 960px;    margin: auto; }

เป็นการเลือก id ที่ชื่อ X เป็น selector ที่ใช้บ่อยมาก แต่ว่ามีข้อกำหนดก็คือ ในหนึ่งหน้าที่แสดงผล จะมี id ซ้ำกันไม่ได้ และถ้าเป็นไปได้ ก็ควรเลี่ยงไปใช้ tag name เลยจะดีกว่า(ใน html5 มี tag name ให้ใช้ค่อนข้างเยอะอยู่แล้ว)

การรองรับ

• IE6+
• Firefox
• Chrome
• Safari
• Opera

.X .error{    color: red;    margin: auto; }

 เป็นการเลือก class ซึ่งต่างจาก id เพราะว่า class นั้นเมื่อสร้างมาแล้ว สามารถนำเอาไปใช้ซ้ำกี่ครั้งก็ได้แม้ว่าจะเป็นหน้าเดียวกันก็ตาม 

การรองรับ

• IE6+
• Firefox
• Chrome
• Safari
• Opera

X Y  li a {    color: red;    margin: auto; }

แบบนี้เรียกว่า descendant หรือ เรียกใช้ที่ส่วนย่อย โดยจากตัวอย่าง เป็นการเลือก tag a ที่อยู่ภายใต้ li (a ที่เป็น child node ของ li)

การรองรับ

• IE6+
• Firefox
• Chrome
• Safari
• Opera

X a {    color: red; }

เป็นการเลือก tag ตัวนั้นเลย จากตัวอย่างก็คือ tag a ซึ่งก็คือ tag link ที่เราเขียนกันนั่นเอง โดยจะเป็นการเลือกทุกๆจุดที่ใช้ tag นี้

การรองรับ

• IE6+
• Firefox
• Chrome
• Safari
• Opera

X:visited and X:link a:link {    color: red; } a:visited {    color: purple; }

 เราจะใช้ :link เพื่อเลือกทุกลิ้งค์ ในจังหวะที่มีการคลิก และ :visited คือการเลือกทุกลิ้งค์ที่เคยเปิดแล้ว จากตัวอย่างก็เลือกเพื่อกำหนดสีธรรมดา

การรองรับ

• IE7+
• Firefox
• Chrome
• Safari
• Opera

X + Y ul + p {    color: red; }

เป็นการเลือก โดยรูปแบบที่ต้องการ จากตัวอย่างนี้  tag p จะถูกเลือก โดยมีเงื่อนไขว่า ต้องปรากฏ tag ul ก่อน p จึงจะทำให้ tag p นั้นถูกเลือก

การรองรับ

• IE7+
• Firefox
• Chrome
• Safari
• Opera

X > Y div#container > ul { border: 1px solid black; }

ทำงานได้คล้ายกับ X Y เลย แต่ว่า X>Y จะเป็นเงื่อนไขมากกว่า ก็คือ จะเป็นการเลือกให้ลึกลงไปเพียงแค่ 1 ชั้นเท่านั้น เกินกว่านั้นไม่สนใจ เช่น กรณีจากตัวอย่าง ถ้าใน div id container มี ul แล้วใน ul ก็มี ul อีก selector ตัวนึ้จะเลือกชั้นแรกเท่านั้น คือ ul ตัวแรก เท่านั้นเอง

โดยการทำงานแบบนี้ จะทำให้ performance ดีขึ้นด้วย

การรองรับ

• IE7+
• Firefox
• Chrome
• Safari
• Opera

X~Y ul ~ p { color: red; }

จะเป็นการเลือก โดยอ้างอิงรูปแบบการจัดเรียงคล้าย X + Y แต่ว่ามีเงื่อนไขเจาะจงที่ต่ำกว่า ก็คือ กรณี X + Y จะเป็นการเลือกเฉพาะ Y ตัวแรกเท่านั้น สำหรับกรณีที่มี Y หลายตัว แต่เมื่อใช้   X ~ Y จะเป็นการเลือกใช้ Y ทุกตัวเลย

การรองรับ

• IE7+
• Firefox
• Chrome
• Safari
• Opera

X[title] a[title] { color: green; }

เป็นการเลือก X โดยอาศัย attribute ช่วย โดยจากตัวอย่าง หมายความว่า เราจะเลือก a ที่มี attribute title เท่านั้น

การรองรับ

• IE7+
• Firefox
• Chrome
• Safari
• Opera

 เอาไปเท่านี้ก่อนครับ เยอะเกิน เดี๋ยวจำไม่หมด แต่สัญญาว่ามีอีกแน่นอนครับ จะมีประมาณ 30 อันครับ ทั้งนี้ อยากให้เอาไปลองเขียนลองใช้ ลองกำหนดให้คล่องก่อน เพราะอย่างที่บอกครับ ว่า CSS สำคัญที่เรื่อง selector เพราะว่าถ้าเขียน CSS แต่ว่าเรียก selector ไม่ได้ ก็ตายตั้งแต่เริ่มแล้วล่ะครับ