E[attribute=value]

プロパティを持っているE要素を指定する。

表示

HTML

CSS


								// IE6
								a.blank {
									background: url("images/i_blank.gif") no-repeat right center;
									padding-right: 18px;
								}

								// other
								a[target=_blank] {
									background: url("images/i_blank.gif") no-repeat right center;
									padding-right: 18px;
								}

E:first-child

兄弟要素で一番最初にくる要素。

表示

ITEM 1
ITEM 2
ITEM 3

HTML

CSS


								// IE6
								ul.ex-list li {
									padding-top: 10px;
									margin-top: 10px;
									border-top: 1px solid #ccc;
								}
								ul.ex-list li.first {
									margin-top: 0;
									padding-top: 0;
									border-top: none;
								}

								// other
								ul.ex-list li {
									padding-top: 10px;
									margin-top: 10px;
									border-top: 1px solid #ccc;
								}
								ul.ex-list li:first-child {
									margin-top: 0;
									padding-top: 0;
									border-top: none;
								}

E > F

E要素の直下のF要素を指定する。

表示

MENU 01
- SUB MENU 01
- SUB MENU 02

HTML


								
								
									
										
											MENU 01
											
												SUB MENU 01
												SUB MENU 02
											
										
									
								

								
								
									
										
											MENU 01
											
												SUB MENU 01
												SUB MENU 02

CSS


								// IE6
								.ex-child .menu-parent {
									background: url("images/i_ar.gif") no-repeat left top;
									padding-left: 20px;
								}
								.ex-child .menu-child {
									padding: 5px 0;
									margin: 10px 0 0 10px;
									border-bottom: 1px dashed #333;
								}

								// other
								.ex-child > ul > li {
									background: url("images/i_ar.gif") no-repeat left top;
									padding-left: 20px;
								}
								.ex-child > ul > li > ul > li {
									padding: 5px 0;
									margin: 10px 0 0 10px;
									border-bottom: 1px dashed #333;
								}

E + F

E要素の兄弟のF要素を指定する。

表示

HEAD 01

PARAGRAPH 01

PARAGRAPH 02

HTML


								
								
									HEAD 01
									PARAGRAPH 01
									PARAGRAPH 02
								

								
								
									HEAD 01
									PARAGRAPH 01
									PARAGRAPH 02

CSS


								// IE6
								.ex-brother p {
									margin-top: 10px;
								}
								.ex-brother p.first {
									margin-top: 20px;
								}

								// other
								.ex-brother p {
									margin-top: 10px;
								}
								.ex-brother h1 + p {
									margin-top: 20px;
								}

E ~ F

E以降のすべての兄弟要素Fを指定する。

表示

RANK 01
RANK 02
RANK 03
RANK 04
RANK 05

HTML

CSS


								// IE6
								.ex-nami li {
									color: red;
								}
								.ex-nami .rank-normal {
									color: blue;
								}

								// other
								.ex-nami li {
									color: red;
								}
								.ex-nami li.rank3 ~ li {
									color: blue;
								}