Selector

NCD Style Sheet Guide v6.0

Sponsor's ADs:

+ Universal Selector

* {PROPERTY: VALUE }

Style is applied to all elements.

<HEAD>
<STYLE TYPE="text/css">
     * {color: red}
</STYLE>
</HEAD>
<BODY>
     <H1>Today is fine.</H1>
     <P>Long before the advent of TV weather ...</P>
</BODY>

View this Example Page


+ Type Selector (the simplest html selector)

SELECTOR {PROPERTY: VALUE }

SELECTOR is a HTML tag name to specify the style.

<HEAD>
<STYLE TYPE="text/css">
   H1 {font-size:12pt; color:red}
   P  {font-size:12pt; color:green}
</STYLE>
</HEAD>
<BODY>
   <H1>Today is fine.</H1>
   <I>tomorrow will be fine.</I>
</BODY>

Today is fine.

Weather Forecasters


+ Grouping

TAG1, TAG2, ..., TAGn {PROPERTY: VALUE }

You can specify the same declaration to different tags at once.

<HEAD>
<STYLE TYPE="text/css">
   H1, P {font-size:12pt; color:red}
</STYLE>
</HEAD>
<BODY>
   <H1>Today is fine.</H1>
   <I>tomorrow will be fine.</I>
</BODY>

Today is fine.

Weather Forecasters


+ Contextual Selector

Descendant Selector
TAG1 TAG2 {PROPERTY: VALUE }

<HEAD>
<STYLE TYPE="text/css">
   BODY I {font-family:Arial; 
           font-size:14pt;
           color:red}
</STYLE>
</HEAD>
<BODY>
<H1>Today is <I>fine</I>.</H1>
<I>tomorrow will be fine.</I>
</BODY>

Today is fine.

tomorrow will be fine.

Child Selector
TAG1 > TAG2 {PROPERTY: VALUE }

Internet Explorer of Macintosh version 5 or later support this selector. 

<HEAD>
<STYLE TYPE="text/css">
  BODY > I {font-family:Arial; 
            font-size:14pt;
            color:red}
</STYLE>
</HEAD>
<BODY>
   <DIV>
   <H1>Today is <I>fine</I>.</H1>
   <I>tomorrow will be fine.</I>
   </DIV>
</BODY>

Today is fine.

tomorrow will be fine.

Adjacent Selector
TAG1 + TAG2 {PROPERTY: VALUE }

Internet Explorer of Macintosh version 5 or later support this selector. 

<HEAD>
<STYLE TYPE="text/css">
   BODY + TT {color:red}
</STYLE>
</HEAD>
<BODY>
   <H1>Weather <TT>forecast</TT></H1>
   <TT>Today is fine.</TT>
   <TT>Tomorrow will be fine.</TT>
</BODY>

Weather forecast

Today is fine. Tomorrow will be fine.

First Child Pseudo Class Selector
TAG:first-child {PROPERTY: VALUE }

Internet Explorer of Macintosh version 5 or later support this pseudo class selector. 

<HEAD>
<STYLE TYPE="text/css">
   U:first-child {color: red}
</STYLE>
</HEAD>
<BODY>
   <P>
   <U>Today</U> is fine.
   <U>Tomorrow</U> will Ue fine.
   </P>
</BODY>

Today is fine. Tomorrow will be fine.



+ Language Pseudo Class Selector

TAG:lang(#) {PROPERTY: VALUE }
    #=Language Code

Only Internet Explorer of Macintosh version 5 or later support this pseudo class selector.
More info about language code and lang attribute: the Language Information. 

<HEAD>
<STYLE TYPE="text/css">
   div:lang(fr) {color: red}
</STYLE>
</HEAD>
<BODY>
   <div lang="fr">
      Aujourd'hui beau temps.
   </div>
   <div lang="en">
      Today good weather.
   </div>
</BODY>
Aujourd'hui beau temps.
Today good weather.


+ Attribute Selector

TAG[#] {PROPERTY: VALUE }
    #=Attribute Name 

<HEAD>
<STYLE TYPE="text/css">
  p[lang] {color: red}
</STYLE>
</HEAD>
<BODY>
  <p lang="en">Yesterday</p>
  <p lang="en-us">Today</p>
  <p lang="en-gb">Tomorrow</p>
  <p lang="ja">Asatte</p>
</BODY>

Yesterday

Today

Tomorrow

Asatte

TAG[#="$"] {PROPERTY: VALUE }
    #=Attribute Name, $=Value 

<HEAD>
<STYLE TYPE="text/css">
  p[lang="en"] {color: red}
</STYLE>
</HEAD>
<BODY>
  <p lang="en">Yesterday</p>
  <p lang="en-us">Today</p>
  <p lang="en-gb">Tomorrow</p>
  <p lang="ja">Asatte</p>
</BODY>

Yesterday

Today

Tomorrow

Asatte

TAG[#|="$"] {PROPERTY: VALUE }
    #=Attribute Name, $=Part of Value include "-" 

<HEAD>
<STYLE TYPE="text/css">
  p[lang|="en"] {color: red}
</STYLE>
</HEAD>
<BODY>
  <p lang="en">Yesterday</p>
  <p lang="en-us">Today</p>
  <p lang="en-gb">Tomorrow</p>
  <p lang="ja">Asatte</p>
</BODY>

Yesterday

Today

Tomorrow

Asatte

TAG[#~="$"] {PROPERTY: VALUE }
    #=Attribute Name, $=Part of Value include Space 

<HEAD>
<STYLE TYPE="text/css">
  p[title~="section"] {color:red}
</STYLE>
</HEAD>
<BODY>
<p title="Wather Map">Weather</p>
<p title="Section 01">Today</p>
<p title="Section 02">Tomorrow</p>
</BODY>

Weather

Today

Tomorrow



+ Class Selector for the Specific Tag

Class Selector
    TAG.name1 {PROPERTY: VALUE }
    TAG.name2 {PROPERTY: VALUE }
    ...
    TAG.namen {PROPERTY: VALUE }

Style Specification
    <TAG CLASS="name1">
    <TAG CLASS="name2">
    ...
    <TAG CLASS="namen">

Class value is case sensitive.
<HEAD>
<STYLE TYPE="text/css">
   H3.red {font-family: Arial; font-size: 10pt; color:red}
   H3.green {font-family: Times New Roman; font-size: 14pt; color:green}
</STYLE>
</HEAD>
<BODY>
<H3 CLASS="red">Today is fine.</H3>
<H3 CLASS="green">Today is fine.</H3>
</BODY>

Today is fine.

Today is fine.



+ Class Selector for Any Tags

Class Selector
    .name1 {PROPERTY: VALUE }
    .name2 {PROPERTY: VALUE }
    ...
    .namen {PROPERTY: VALUE }

Style Specification
    <ANYTAG CLASS="name1">
    <ANYTAG CLASS="name2">
    ...
    <ANYTAG CLASS="namen"> 

<HEAD>
<STYLE TYPE="text/css">
   .red {font-family: Arial; font-size: 10pt; color:red}
   .green {font-family: Times New Roman; font-size: 14pt; color:green}
</STYLE>
</HEAD>
<BODY>
<H3 CLASS="green">Today is fine.</H3>
<H3 CLASS="red">Today is fine.</H3>
<DIV CLASS="green">Today is fine.</DIV>
</BODY>

Today is fine.

Today is fine.

Today is fine.


+ ID Selector

ID Selector
    #id1 {PROPERTY: VALUE }
    #id2 {PROPERTY: VALUE }
    ...
    #idn {PROPERTY: VALUE }

ID Specification
    <TAG1 ID="id1">
    <TAG2 ID="id2">
    ...
    <TAGn ID="idn">

The ID attribute allows authors to assign a unique name to an element, and the name is case sensitive.
<HEAD>
<STYLE TYPE="text/css">
   #id100 {font-family: Arial; font-size: 10pt; color:red}
   #id101 {font-family: Times New Roman; font-size: 14pt; color:green}
</STYLE>
</HEAD>
<BODY>
<H3 ID="id00">Today is fine.</H3>
<DIV ID="id101">Today is fine.</DIV>
</BODY>

Today is fine.

Today is fine.


+ Link Selector

A:link {PROPERTY: VALUE}
A:visited {PROPERTY: VALUE}
A:focus {PROPERTY: VALUE}
A:active {PROPERTY: VALUE}
A:hover {PROPERTY: VALUE}

Internet Explorer of Macintosh version 5 or later support "focus". 

<HEAD>
<STYLE TYPE="text/css">
     A:link {font-size: 14pt; text-decoration:underline; color:red}
     A:visited {font-size: 10pt; text-decoration:none; color:green}
     A:focus {font-weight:bold; text-decoration:none; color:orange}
     A:active {font-size: 20pt; text-decoration:none; color:gray}
     A:hover {font-size: 10pt; text-decoration:none; color:blue}
</STYLE>
</HEAD>
<BODY>
<A href="link01.htm">New Link</A><BR>
<A href="link02.htm">Visited Link</A>
</BODY>
New Link
Visited Link


When use Link selector with class (ex. "A.class:link"), "visited" should be specified before "focus", "active" and "hover", because visited values override others on Internet Explorer by bug.



+ Line & Letter Selector

Select First Line
TAG:first-line {PROPERTY: VALUE } 

<HEAD>
<STYLE TYPE="text/css">
  p:first-line {color:green}
</STYLE>
</HEAD>
<BODY>
  <p>Today is fine.<br>
  Tomorrow will be fine.</p>
</BODY>

Today is fine.
Tomorrow will be fine.

Select First Letter
TAG:first-letter {PROPERTY: VALUE } 

<HEAD>
<STYLE TYPE="text/css">
  p:first-letter {font-size:220%; 
                  font-weight:bold;
                  float:left;
                  padding-right:3pt;
                  color:green}
</STYLE>
</HEAD>
<BODY>
  <p>Today is fine.<br>
  Tomorrow will be fine.</p>
</BODY>

Today is fine.
Tomorrow will be fine.

+ Media Type

@media # {PROPERTY: VALUE }
#=all, screen, print 

<style type="text/css">
   @media print { P {font-size:4pt} }
   @media screen { P {font-size:16pt} }
</style>
Sample Page


Style Sheet Guide | HTML Design Guide
Basic | Selector | Cascading
Font | Text | List | Color & Background | Box | Table | Position & Format | Other|
Selector List | Property List

BACK TO NCD HOME
Network Communication Design - /
 Copyright & Publishing 1994-2008 Network Communication Design