[CSS] พื้นฐานการเรียกใช้งาน CSS

เขียนเกี่ยวกับ CSS มาเยอะแยะ คราวนี้ขอย้อนกลับไกลหน่อย ย้อนกลับมาถึงการเรียกใช้งาน CSS ซึ่งการเรียกใช้งาน CSS นั้นก็มีอยู่ในหลาย ๆ รูปแบบ

การเรียกใช้งาน CSS

เรามาดูการเรียกใช้งานแบบหลัก ๆ ที่เห็นกันบ่อย ๆ นะครับ ก็จะมี Inline style, เขียนใน >head< หรือเขียนเรียกจาก >link<

Inline style

ก็คือการเขียนลงไปในตัว tag HTML เลย โดยเรียกใช้ด้วย style="xxx" อย่างเช่น

[html]
<h1 style="font-size:32px;color:#FF0000;">Kwon Yuri</h1>
[/html]

รูปแบบนี้คือการใช้งานแบบ Inline style เป็นการกำหนดให้เฉพาะตัวนี้ มีคุณสมบัติดังที่เรากำหนดให้

เขียนลงไปใน <head>

ก็คือการกำหนดคุณสมบัติให้ element ตัวไหน มีคุณสมบัติตามที่เรากำหนด โดยคลุมด้วย

อย่างเช่น

[html]
<head>
<style> h1 { font-size:32px; color:#FF0000; } </style>
</head>
[/html]

เรียกจาก file โดยใช้ <link>

ให้สร้าง file css ขึ้นมา ในนั้นก็เขียน CSS กำหนดคุณสมบัติให้ตัว element ต่าง ๆ ตามที่เราต้องการ แล้วก็ใช้ >link< เพื่อเรียก file CSS ที่เราสร้างขึ้นมาใช้งาน อย่างเช่น ผมสร้าง style.css แล้ววางไว้ในตำแหน่งชั้นเดียวกับตัว index.html ของเรา ก็เรียกโดย

[html]
<head>
<link rel="stylesheet" href="style.css" />
</head>
[/html]

แต่ก่อนจะทำความเข้าใจเรื่องการเรียกใช้งานมากขึ้นกว่านี้ แนะนำให้ไปอ่านหัวข้อ CSS : ลำดับความสำคัญของ style ใน CSS ก่อนเพื่อทำความเข้าใจเรื่อง ID และ Class ใน tag HTML

หลังจากที่เรียนรู้เรื่องเกี่ยวกับ ID และ Class เสร็จแล้ว คราวนี้เรามาดูกันนะครับ ว่าจะนำไปใช้กับ CSS ได้อย่างไรบ้าง

[html]
<h1 id="heading1" class="title1">Kwon Yuri</h1>
[/html]

ถ้าเรามี element ที่มี ID และ Class แบบนี้ เราสามารถกำหนดคุณสมบัติให้ได้แบบนี้ครับ

[css]
h1 { font-size:32px; color:#FF0000; } // ใช้ชื่อ Tag HTML
#heading1 { font-size:32px; color:#FF0000; } // ใช้ชื่อ ID
.title1 { font-size:32px; color:#FF0000; } // ใช้ชื่อ Class
[/css]

ซึ่งจากบทความที่ให้ไปอ่านมาก่อนนั้น เราก็จะเข้าใจอยู่แล้ว ในแต่ละแบบมันต่างกันอย่างไร ตัวไหนสำคัญกว่ากัน

[WordPress] Reference สำหรับใช้งาน WP_Query

ในการ query เพื่อนำข้อมูลออกมาใช้งานใน WordPress นั้น มีอยู่หลายวิธี 1 ในนั้นก็คือ WP_Query ซึ่งวิธีการใช้งาน WP_Query นั้น ในเว็บของ WordPress เองก็มีอธิบายการใช้งานไว้แล้วครับ

ลองไปดู : วิธีใช้ WP_Query

แต่ในเว็บ WordPress เองอธิบายไว้ซะละเอียดเกิน จนอาจจะยาวเกินไปที่เราจะทำการค้นหามาใช้งาน จนผมไปเจอใน Gitgub คุณ Mark Luetke ได้ทำ Reference สำหรับใช้งาน WP_Query ไว้แบบนี้ครับ

[php]
<?php
/**
* WordPress Query Comprehensive Reference
* Compiled by luetkemj – luetkemj.com
*
* CODEX: http://codex.wordpress.org/Class_Reference/WP_Query
* Source: http://core.trac.wordpress.org/browser/tags/3.3.1/wp-includes/query.php
*/

$args = array(

//////Author Parameters – Show posts associated with certain author.
‘author’ => 1,2,3, //(int) – use author id [use minus (-) to exclude authors by ID ex. ‘author’ => -1,-2,-3,]
‘author_name’ => ‘luetkemj’, //(string) – use ‘user_nicename’ (NOT name)

//////Category Parameters – Show posts associated with certain categories.
‘cat’ => 5,//(int) – use category id.
‘category_name’ => ‘staff’, ‘news’, //(string) – use category slug (NOT name).
‘category__and’ => array( 2, 6 ), //(array) – use category id.
‘category__in’ => array( 2, 6 ), //(array) – use category id.
‘category__not_in’ => array( 2, 6 ), //(array) – use category id.

//////Tag Parameters – Show posts associated with certain tags.
‘tag’ => ‘cooking’, //(string) – use tag slug.
‘tag_id’ => 5, //(int) – use tag id.
‘tag__and’ => array( 2, 6), //(array) – use tag ids.
‘tag__in’ => array( 2, 6), //(array) – use tag ids.
‘tag__not_in’ => array( 2, 6), //(array) – use tag ids.
‘tag_slug__and’ => array( 2, 6), //(array) – use tag slugs.
‘tag_slug__in’ => array( 2, 6), //(array) – use tag slugs.

//////Taxonomy Parameters – Show posts associated with certain taxonomy.
//Important Note: tax_query takes an array of tax query arguments arrays (it takes an array of arrays)
//This construct allows you to query multiple taxonomies by using the relation parameter in the first (outer) array to describe the boolean relationship between the taxonomy queries.
‘tax_query’ => array( //(array) – use taxonomy parameters (available with Version 3.1).
‘relation’ => ‘AND’, //(string) – Possible values are ‘AND’ or ‘OR’ and is the equivalent of ruuning a JOIN for each taxonomy
array(
‘taxonomy’ => ‘color’, //(string) – Taxonomy.
‘field’ => ‘slug’, //(string) – Select taxonomy term by (‘id’ or ‘slug’)
‘terms’ => array( ‘red’, ‘blue’ ), //(int/string/array) – Taxonomy term(s).
‘include_children’ => true, //(bool) – Whether or not to include children for hierarchical taxonomies. Defaults to true.
‘operator’ => ‘IN’ //(string) – Operator to test. Possible values are ‘IN’, ‘NOT IN’, ‘AND’.
),
array(
‘taxonomy’ => ‘actor’,
‘field’ => ‘id’,
‘terms’ => array( 103, 115, 206 ),
‘include_children’ => false,
‘operator’ => ‘NOT IN’
)
),

//////Post & Page Parameters – Display content based on post and page parameters.
‘p’ => 1, //(int) – use post id.
‘name’ => ‘hello-world’, //(string) – use post slug.
‘page_id’ => 1, //(int) – use page id.
‘pagename’ => ‘sample-page’, //(string) – use page slug.
‘pagename’ => ‘contact_us/canada’, //(string) – Display child page using the slug of the parent and the child page, separated ba slash
‘post_parent’ => 1, //(int) – use page id. Return just the child Pages.
‘post__in’ => array(1,2,3), //(array) – use post ids. Specify posts to retrieve.
‘post__not_in’ => array(1,2,3), //(array) – use post ids. Specify post NOT to retrieve.
//NOTE: you cannot combine ‘post__in’ and ‘post__not_in’ in the same query

//////Type & Status Parameters – Show posts associated with certain type or status.
‘post_type’ => array( //(string / array) – use post types. Retrieves posts by Post Types, default value is ‘post’;
‘post’, // – a post.
‘page’, // – a page.
‘revision’, // – a revision.
‘attachment’, // – an attachment. The default WP_Query sets ‘post_status’=>’published’, but atchments default to ‘post_status’=>’inherit’ so you’ll need to set the status to ‘inherit’ or ‘any’.
‘any’, // – retrieves any type except revisions and types with ‘exclude_from_search’ set to true.
‘my-post-type’ // – Custom Post Types (e.g. movies)
),
‘post_status’ => array( //(string / array) – use post status. Retrieves posts by Post Status, default value i’publish’.
‘publish’, // – a published post or page.
‘pending’, // – post is pending review.
‘draft’, // – a post in draft status.
‘auto-draft’ // – a newly created post, with no content.
‘future’ // – a post to publish in the future.
‘private’ // – not visible to users who are not logged in.
‘inherit’ // – a revision. see get_children.
‘trash’ // – post is in trashbin (available with Version 2.9).
‘any’ // – retrieves any status except those from post types with ‘exclude_from_search’ set to true.
),

//////Pagination Parameters
‘posts_per_page’ => 10, //(int) – number of post to show per page (available with Version 2.1). Use ‘posts_per_page’=1 to show all posts. Note if the query is in a feed, wordpress overwrites this parameter with the stored ‘posts_per_rss’ option. Treimpose the limit, try using the ‘post_limits’ filter, or filter ‘pre_option_posts_per_rss’ and return -1
‘posts_per_archive_page’ => 10, //(int) – number of posts to show per page – on archive pages only. Over-rides showposts anposts_per_page on pages where is_archive() or is_search() would be true
‘nopaging’ => false, //(bool) – show all posts or use pagination. Default value is ‘false’, use paging.
‘paged’ => get_query_var(‘page’), //(int) – number of page. Show the posts that would normally show up just on page X when usinthe "Older Entries" link.
//NOTE: You should set get_query_var( ‘page’ ); if you want your query to work with pagination. Since WordPress 3.0.2, you dget_query_var( ‘page’ ) instead of get_query_var( ‘paged’ ). The pagination parameter ‘paged’ for WP_Query() remains the same.

//////Offset Parameter
‘offset’ => 3, //(int) – number of post to displace or pass over.

//////Order & Orderby Parameters – Sort retrieved posts.
‘order’ => ‘DESC’, //(string) – Designates the ascending or descending order of the ‘orderby’ parameter. Defaultto ‘DESC’.
//Possible Values:
//’ASC’ – ascending order from lowest to highest values (1, 2, 3; a, b, c).
//’DESC’ – descending order from highest to lowest values (3, 2, 1; c, b, a).
‘orderby’ => ‘date’, //(string) – Sort retrieved posts by parameter. Defaults to ‘date’.
//Possible Values://
//’none’ – No order (available with Version 2.8).
//’ID’ – Order by post id. Note the captialization.
//’author’ – Order by author.
//’title’ – Order by title.
//’date’ – Order by date.
//’modified’ – Order by last modified date.
//’parent’ – Order by post/page parent id.
//’rand’ – Random order.
//’comment_count’ – Order by number of comments (available with Version 2.9).
//’menu_order’ – Order by Page Order. Used most often for Pages (Order field in the EdiPage Attributes box) and for Attachments (the integer fields in the Insert / Upload MediGallery dialog), but could be used for any post type with distinct ‘menu_order’ values (theall default to 0).
//’meta_value’ – Note that a ‘meta_key=keyname’ must also be present in the query. Note alsthat the sorting will be alphabetical which is fine for strings (i.e. words), but can bunexpected for numbers (e.g. 1, 3, 34, 4, 56, 6, etc, rather than 1, 3, 4, 6, 34, 56 as yomight naturally expect).
//’meta_value_num’ – Order by numeric meta value (available with Version 2.8). Also notthat a ‘meta_key=keyname’ must also be present in the query. This value allows for numericasorting as noted above in ‘meta_value’.

//////Sticky Post Parameters – Show Sticky Posts or ignore them.
‘ignore_sticky_posts’ => false, //(bool) – ignore sticky posts or not. Default value is false, don’t ignore. Ignore/excludsticky posts being included at the beginning of posts returned, but the sticky post will still be returned in the natural order othat list of posts returned.
//NOTE: For more info on sticky post queries see: http://codex.wordpress.org/Class_Reference/WP_Query#Sticky_Post_Parameters

//////Time Parameters – Show posts associated with a certain time period.
‘year’ => 2012, //(int) – 4 digit year (e.g. 2011).
‘monthnum’ => 3, //(int) – Month number (from 1 to 12).
‘w’ => 25, //(int) – Week of the year (from 0 to 53). Uses the MySQL WEEK command. The mode is dependenon the "start_of_week" option.
‘day’ => 17, //(int) – Day of the month (from 1 to 31).
‘hour’ => 13, //(int) – Hour (from 0 to 23).
‘minute’ => 19, //(int) – Minute (from 0 to 60).
‘second’ => 30, //(int) – Second (0 to 60).

//////Custom Field Parameters – Show posts associated with a certain custom field.
‘meta_key’ => ‘key’, //(string) – Custom field key.
‘meta_value’ => ‘value’, //(string) – Custom field value.
‘meta_value_num’ => 10, //(number) – Custom field value.
‘meta_compare’ => ‘=’, //(string) – Operator to test the ‘meta_value’. Possible values are ‘!=’, ‘>’, ‘>=’, ‘<‘, or =’. Default value is ‘=’.
‘meta_query’ => array( //(array) – Custom field parameters (available with Version 3.1).
array(
‘key’ => ‘color’, //(string) – Custom field key.
‘value’ => ‘blue’ //(string/array) – Custom field value (Note: Array support is limited to a compare value of ‘IN’, ‘NOT IN’, ‘BETWEEN’, or ‘NOT BETWEEN’)
‘type’ => ‘CHAR’, //(string) – Custom field type. Possible values are ‘NUMERIC’, ‘BINARY’, ‘CHAR’, ‘DATE’, ‘DATETIME’, ‘DECIMAL’, ‘SIGNED’, ‘TIME’, ‘UNSIGNED’. Default value is ‘CHAR’.
‘compare’ => ‘=’ //(string) – Operator to test. Possible values are ‘=’, ‘!=’, ‘>’, ‘>=’, ‘<‘, ‘<=’, ‘LIKE’, ‘NOT LIKE’, ‘IN’, ‘NOT IN’, ‘BETWEEN’, ‘NOT BETWEEN’. Default value is ‘=’.
),
array(
‘key’ => ‘price’,
‘value’ => array( 1,200 ),
‘compare’ => ‘NOT LIKE’
)

//////Permission Parameters – Display published posts, as well as private posts, if the user has the appropriate capability:
‘perm’ => ‘readable’ //(string) Possible values are ‘readable’, ‘editable’ (possible more ie all capabilitiealthough I have not tested)

////Parameters relating to caching
‘no_found_rows’ => false, //(bool) Default is false. WordPress uses SQL_CALC_FOUND_ROWS in most queries in order timplement pagination. Even when you don’t need pagination at all. By Setting this parameter to true you are telling wordPress not tcount the total rows and reducing load on the DB. Pagination will NOT WORK when this parameter is set to true. For more informatiosee: http://flavio.tordini.org/speed-up-wordpress-get_posts-and-query_posts-functions
‘cache_results’ => true, //(bool) Default is true
‘update_post_term_cache’ => true, //(bool) Default is true
‘update_post_meta_cache’ => true //(bool) Default is true
//NOTE Caching is a good thing. Setting these to false is generally not advised. For more info on usage see: http://codex.wordpresorg/Class_Reference/WP_Query#Permission_Parameters

//////Post Field Parameters
//Not sure what these do. For more info see: http://codex.wordpress.org/Class_Reference/WP_Query#Post_Field_Parameters

//////Filters
//For more information on available Filters see: http://codex.wordpress.org/Class_Reference/WP_Query#Filters

);

$the_query = new WP_Query( $args );

// The Loop
if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post();
// Do Stuff
endwhile;
endif;

// Reset Post Data
wp_reset_postdata();

?>
[/php]

หรือไปดูใน Github : WordPress Query Comprehensive Reference

แนะนำ Free Text Editor สำหรับเริ่มหัดทำเว็บ

มีหลาย ๆ คนมาถามผมเหมือนกัน ว่าใช้ Text Editor ตัวไหนดีถ้าจะเริ่มหัดทำเว็บ ซึ่งตัว Text Editor มีอยู่มากมายให้เลือกใช้จริง ๆ ไม่ว่าจะเป็น EditPlus, UltraEdit, E Text Editor หรือจะเป็น DreamWeaver แต่พวกที่พูดถึงไป มันเสียเงินทั้งนั้น เราเพิ่งเริ่มคิดที่จะหัดทำ คงยังไม่อยากจะเสียเงิน ผมเลยจะแนะนำ Text Editor ที่เป็นของฟรีให้ได้เลือกใช้งานกัน

Notepad++

Notepad++

Download ที่นี่ : Notepad++

Programmer’s Notepad

Programmer's Notepad

Download ที่นี่ : Programmer’s Notepad

Sublime Text

Sublime Text

จริง ๆ แล้ว Sublime Text นั้นก็มีในแบบเสียเงิน แต่สำหรับคนเริ่มต้นแล้ว เท่าที่ฟรีของมันก็เพียงพอแล้วครับ

Download ที่นี่ : Sublime Text

ส่วนผมเอง ใช้ Sublime Text แบบเสียเงิน แล้วเพิ่มพวก Zen Coding, jQuery Snippet, WordPress Snippet เข้าไป เท่านี้ก็ครบเท่าที่ผมต้องการแล้วครับ

[CSS3] ประยุกต์การใช้งานกับ text-shadow

text-shadow นี่เป็น 1 ใน property ของ CSS3 ที่ผมจะมาแนะนำให้ดูกัน ซึ่งตัว text-shadow เป็น property ที่เราอ่านก็รู้เลยว่า เป็นการใส่เงาให้กับตัวอักษร ไปดูกันก่อนว่า ตัว text-shadow ใช้งานยังไง

CSS3 : วิธีการใช้ text-shadow

รูปแบบของ value ในการใช้งาน text-shadow ก็เป็นลักษณะแบบนี้

[CSS3] ประยุกต์การใช้งาน text-shadow [1]

[css]
text-shadow: 2px 4px 3px #FF0099;
[/css]

โดยค่า value ที่ใช้กับตัว text-shadow นั้นมีดังนี้

  1. ค่าตัวแรก เป็นระยะห่างที่เงานั้นห่างจากตัวอักษรเป็นระยะเท่าไหร่ในแนวนอน
  2. ค่าตัวที่สอง เป็นระยะห่างที่เงานั้นห่างจากตัวอักษรเป็นระยะเท่าไหร่ในแนวตั้ง
  3. ค่าตัวที่สาม เป็นความเบลอของเงา หรือ blur radius ยิ่งค่ามาก เงาก็จะยิ่งเบลอขึ้น
  4. ค่าตัวสุดท้าย สีของเงา เราต้องการสีของเงาเป็นสีอะไร ก็ใส่ลงไปเลยครับ

จาก css ด้านบน เราจะได้ผลลัพธ์มาแบบนี้ครับ

[CSS3] ประยุกต์การใช้งานกับ text-shadow [2]

ในการใส่ค่าสีของเงานั้น เราสามารถใช้แบบ rgba ได้ด้วย การใช้แบบ rgba เพื่อที่เราจะได้สามารถกำหนด opacity ให้กับสีเงาได้ด้วย โดยการใส่ค่า rgba มีลักษณะแบบนี้

[CSS3] ประยุกต์การใช้งานกับ text-shadow [3]

[css]
text-shadow: 2px 4px 3px rgba(255,0,153,1);
[/css]

โดยค่าที่ใส่ให้กับสีนั้น เราใส่ค่าได้ตั้งแต่ 0 – 255 และค่าสุดท้าย opacity นั้นใส่ค่าได้ตั้งแต่ 0 – 1

ถ้าเราลองปรับค่า opacity ดู แล้วเทียบกันจะได้แบบนี้ครับ

[css]
text-shadow: 2px 4px 3px rgba(255,0,153,1);
text-shadow: 2px 4px 3px rgba(255,0,153,0.5);
[/css]

[CSS3] ประยุกต์การใช้งานกับ text-shadow [4]

CSS3 : ใส่เงาหลาย ๆ ชั้น

การใช้ text-shadow นั้น เราสามารถใส่ค่าให้ได้มากกว่า 1 ชั้น โดยแต่ละชั้นนั้น เราจะคั่นด้วย , อย่างเช่น

[css]
text-shadow: 3px 3px 5px #777, -2px -3px 7px #FF0000;
[/css]

หรือ

[css]
text-shadow:0px 0px 4px #FFFFFF, 0px -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;
[/css]

คราวนี้เราลองมาประยุกต์ใช้งานแบบง่าย ๆ ดูนะครับ

text-shadow : ทำตัวอักษรแบบ inset

เราจะทำตัวอักษรแบบ inset ด้วย text-shadow แบบง่าย ๆ อย่างนี้ครับ

[css]
color: #CCC;
text-shadow : 0px -1px 1px #000;
[/css]

[CSS3] ประยุกต์การใช้งานกับ text-shadow [5]

text-shadow : ทำตัวอักษรแบบ embross

เราจะทำตัวอักษรแบบ embross ด้วย text-shadow แบบง่าย ๆ อย่างนี้ครับ

[css]
color:#CCC;
text-shadow:-1px -1px #FFFFFF, 1px 1px #333333;
[/css]

[CSS3] ประยุกต์การใช้งานกับ text-shadow [6]

text-shadow : ทำตัวอักษรแบบไฟนีออน

เราจะทำตัวอักษรแบบไฟนีออน ด้วย text-shadow แบบง่าย ๆ อย่างนี้ครับ

[css]
color:#ffffff;
text-shadow:0 0 1px #ffffff, 0 0 2px #ffffff, 0 0 3px #ffffff, 0 0 4px #ff00de, 0 0 7px #ff00de, 0 0 8px #ff00de, 0 0 10px #ff00de, 0 0 15px #ff00de;
[/css]

[CSS3] ประยุกต์การใช้งานกับ text-shadow [7]

ระหว่างที่เรากำลังดีใจกับการเรียนรู้ text-shadow อยู่นั่น ลองมาดูกันก่อนว่า Browser ไหนใช้งานกันได้บ้าง

text-shadow กับ browser ที่สนับสนุน

ผมก็เข้าไปเช็คดูในเว็บ When can I use ก็พบว่า text-shadow ยังไม่สนับสนุนใน IE9 แต่จะสนับสนุนเมื่อถึง IE10

[CSS3] ประยุกต์การใช้งานกับ text-shadow [8]

ก่อน IE10 จะมา เราก็คงทำได้แค่ใช้อย่างอื่นแทนกันไปก่อน โดยสำหรับ IE นั้น text-shadow เราจะแทนด้วย

[css]
filter: progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=ff0000);
[/css]

แต่ผมไม่ขออธิบายถึงมันนะครับ ผมนั่งรอ IE10 แล้วกัน ^^

[CSS3] Pseudo-Classes

ผมจะเริ่มโดยใช้ HTML ตัวนี้นะครับ

[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pseudo-Classes</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="post">
<h3 class="post_text">ABC</h3>
<p class="post_text">ABC</p>
<h3 class="post_text">ABC</h3>
<p class="post_text">ABC</p>
<h3 class="post_text">ABC</h3>
<p class="post_text">ABC</p>
<h3 class="post_text">ABC</h3>
<p class="post_text">ABC</p>
<h3 class="post_text">ABC</h3>
<p class="post_text">ABC</p>
</div>
</body>
</html>
[/html]

Pseudo-Classes :root

สำหรับ :root ผมรู้สึกว่า มันทำหน้าที่ selector เหมือนกับเราสั่งกับ body อะไรแบบนั้นอะครับ อย่างเช่น

[css]
:root {background:pink;}
[/css]

เราเลยได้ผลลัพธ์ออกมาเป็นแบบนี้ครับ

[CSS3] Pseudo-Classes [1]

:root มันคือการเลือก root ของตัว document ซึ่งผลที่ได้ก็คือ หน้าเว็บของเรามีพื้นหลังเป็นสีชมพู

Pseudo-Classes :nth-child(n)

สำหรับตัว :nth-child(n) นั้น มันก็คือการเลือกลำดับที่นั่นละครับ อย่างเช่นเราต้องการให้ตัว element ลำดับที่ 4 ใน id post มีขนาดตัวอักษรใหญ่ขึ้น แล้วเป็นสีเขียว เราก็เขียนไปว่า

[css]
#post :nth-child(4) {font-size:30px;color:green;}
[/css]

ผลลัพธ์ที่ได้ออกมาก็จะเป็น

[CSS3] Pseudo-Classes [2]

แล้วถ้าเราจะเลือกเป็น tag h3 ที่อยู่ในลำดับที่ 4 ใน id post ละ งั้นก็เขียนแบบนี้แล้วกัน

[css]
#post h3:nth-child(4) {font-size:30px;color:green;}
[/css]

ผลลัพธ์ออกมาเราก็จะได้ tag h3 ลำดับที่ 4 มีขนาดใหญ่ขึ้น เป็นสีเขียว

[CSS3] Pseudo-Classes [1]

อ้าว เฮ้ย ไม่เห็นได้เลย ก็เพราะว่าตัว :nth-child(4) นั้น มันจะวิ่งดูใน id post ว่าตัวไหนเป็นลำดับที่ 4 แล้วค่อยมาดูว่าลำดับที่ 4 ตรงกับ selector ที่เรากำหนดไว้หรือเปล่า ซึ่งในตัวอย่างลำดับที่ 4 มันต้องเป็น tag p ไม่ใช่ tag h3 ดังนั้นมันเลยไม่แสดงผลที่เรากำหนด

ดังนั้นถ้าเราต้องการให้ tag h3 ในลำดับที่ 4 มันแสดงผลแบบที่เราต้องการ ก็ต้องนับก่อนมันอยู่ลำดับที่เท่าไหร่ใน id post ซึ่งเราก็จะได้ว่า

[css]
#post h3:nth-child(7) {font-size:30px;color:green;}
[/css]

คราวนี้มาดูผลลัพธ์ว่าตรงกับที่เราต้องการมั้ย

[CSS3] Pseudo-Classes [3]

ตรงกับที่เราต้องการแล้ว แต่แบบนี้มันก็ลำบากนะ ต้องมานับเองว่ามันจะอยู่ในลำดับที่เท่าไหร่ใน id post มันน่าจะมีวิธีที่ง่ายกว่า ซึ่งมันก็มีครับคือการใช้ :nth-of-type(n)

Pseudo-Classes :nth-of-type(n)

สำหรับ :nth-of-type(n) นั้นจะแบ่งตามประเภทของ element เลยครับ อย่างเช่น เราจะเลือกลำดับที่ 3 นะครับ

[css]
#post :nth-of-type(3) {font-size:30px;color:green;}
[/css]

เราก็จะได้ผลลัพธ์ออกมาเป็น

[CSS3] Pseudo-Classes [4]

จะเห็นว่า tag h3 และ tag p ที่อยู่ในลำดับที่ 3 เป็นตัวใหญ่สีเขียวทั้งคู่ เพราะว่ามันแบ่งแยกลำดับตาม element

คราวนี้จากตัวอย่างของหัวข้อที่แล้ว เราจะมาเลือก tag h3 ลำดับที่ 4 กันใหม่ โดยใช้ :nth-of-type(n) แทนตัว :nth-child(n)

[css]
#post h3:nth-of-type(4) {font-size:30px;color:green;}
[/css]

ผลลัพธ์ที่ได้ก็จะเป็น

[CSS3] Pseudo-Classes [3]

ซึ่งแบบนี้ก็จะง่ายกว่าที่เราต้องมานับลำดับในแบบของ :nth-child(n) ยังไงก็ลองนำไปใช้งานจริงดูนะครับ จะได้ใช้งานได้คล่อง ๆ