CSS Selectors | Class and ID Selectors

css_class_and_id_selector

CSS Class Selector

Class selector using (.) dot notation can be used to select elements that have a class attribute containing a specific value or values.The name of the class value must immediately follow the dot (.)

*.design { color: gray } OR .desig { color: gray }
  /* to set a color for all elements with "design" class */

p.design { color: gray }
  /* to set a color for "p" elements with "design" class */
<p class="design">Web Design</p>
p.design.develop { color: gray }
/* to set a color for "p" elements with "design" 
and white separated with develop class */
<p class="design develop">Web Designing & Development</p>

CSS ID Selector

ID selector using “hash notation” can be used to select elements that have an ID containing a specific value or values. The name of the ID value must immediately follow the octothorpe (#).  An ID typed attribute can be used to uniquely identify its element. There is no two such attributes can have the same value in a conforming document.

*#testing { color: red } OR #testing { color: red }
  /* to set a color for all elements with "testing" id */

p#testing { color: red }
  /* to set a color for "p" elements with "testing" id */
<p id="testing">Web Testing</p>

CSS Attribute Selector | CSS Selectors

CSS Attribute Selector

Attribute selectors select every element with the attribute specified within square brackets{}. An attribute type or an attribute with a specific value can be styled with them.

Existing Attribute Selectors :

  • [attributename]
  • [attributename="val"]
  • [attributename~="val"]
  • [attributename|="val"]
  • [attributename^="val"]
  • [attributename$="val"]
  • [attributename*="val"]

1.[attributename]

This selector will match only input elements that use the type attribute, such as the following element:

input[type] {}
<input type="text">

2. [attributename="val"] /* Exact(match) Attribute Value Selector */

 It will match by both attribute and value. If you want to be more specific, use the “equality” attribute selector.

input[type="textarea"] {}
<input type="textarea">

3.[attributename~="val"] /* Delimited value selector - Whitespace */

The elements whose attribute value contains the given word among a space-separated list of words like  value should be  (rel = “language2 language”).

a[rel~="language"]{}
<a rel="language2 language" href="#"> Link </a> <!-- Matches the second word "language" -->

4.[attributename|="val"] /* Language attribute selector */

This selector is used to match the lang attribute. This selector will match any elements whose lang attribute value begins with “es”, including “es-ES”, “es-MX”.

p[lang|="es-ES"] {}
<p lang="es-ES">Spain</p>
<p lang="es-MX">Mexico</p>

5.[attributename^="val"] /* Value start selector */

This attribute value begins with the specified string.

a[title^='image'] {...}
<a title="image"></a>

6.[attributename$="val"] /* Ending Selector */

This attribute value ends with the specified string.

a[title$='2'] {...}
<a title="image 2"></a>

7.[attributename*="val"] /* Arbitrary Selector */

This attribute value contains the specified substring.

a[title*="image"] {}
<a title="source image link"></a>

CSS Universal Selector | CSS Selectors

CSS Universal Selector

The universal selector will select groups of elements and apply a style rule. The symbol for the universal selector is the asterisk (*). For example, to set a default color for all elements within a file, use the following rule:

* {color: blue;}

You can also use the universal selector to select all children of an element. For example, the
following rule sets all elements within a <div> element to a sans-serif typeface:

p * {font-family: Arial;}

The universal selector is always overridden by more specific selectors. The following style rules show a universal selector along with other rules that have more specific selectors. In this example, the <a>  rules override the universal selector.

* {color: purple;}  /* Universal Selector */ 
a {color: red;} /* Specific Selector */

Types of CSS Selectors | CSS

CSS SELECTORS

Selectors  are used to define rules that apply to only a selected set of HTML elements. Selector identifies those markup elements to which the CSS style(s) will be applied.

Types of CSS Selectors:

  • Universal Selector
  • Attribute Selector
  • Class Selector
  • ID Selector
  • Pseudo-classes
    • Dynamic pseudo-classes
    • The target pseudo-class
    • The language pseudo-class
    • Structural pseudo-classes
    • The negation pseudo-class
  • Combinators 
    • Descendant combinator
    • Child combinator
    • Adjacent sibling combinator
    • General sibling combinator

 

HTML | Tags | Presentation Tags

html presentation

These are just three of the ten options available to indicate how text can appear in XHTML. The full list is bold, italic, monospaced, underlined, strikethrough, teletype, larger, smaller, superscripted, and subscripted text.

<b>:

Anything that appears in a <b> element is displayed in bold.

<!DOCTYPE HTML—

<p>This is <b>Bold Text</b></p>

</html>

<i>:

The content of an <i> element is displayed in italicized text.

<!DOCTYPE HTML—

<p>This is <i>Italic Text</i></p>

</html>

<u>:

The content of a <u> element is underlined with a simple line.

<!DOCTYPE HTML—

<p> This is <u>Underlined Text</u></p>

</html>

<strike>:

The content of an <s> or <strike> element is displayed with a strikethrough, which is a thin line through the text (<s> is just the abbreviated form of <strike>.

<!DOCTYPE HTML—

<p> This is a  <strike>Strike Text </strike> or</p>

<p> This is also a <s>Strike Text</s><p>

</html>

<tt>:

The content of a <tt> element is written in mono-spaced font (like that of a teletype machine).

<!DOCTYPE HTML—

<tt>This is tt Text<tt>

</html>

<sup>:

The content of a <sup> element is written in superscript; it is displayed half a char the other characters and is also often slightly smaller than the text surrounding it.

<!DOCTYPE HTML—

<p> Today is 1 <sup>st </sup> January </p>

</html>

<sub>:

The content of a <sub> element is written in subscript; it is displayed half a character ‘ s height beneath the other characters and is also often slightly smaller than the text surrounding it.

<!DOCTYPE HTML—

<p> We got a solution of H<sub>2</sub>O </p>

</html>

<big>:

The contents of this element one font size larger than the rest of the text surrounding it.

<!DOCTYPE HTML—

<p> This is the <big>Big Text</big> </p>

</html>

<small>:

This contents are displayed one font size smaller than the rest of the text surrounding it.

<!DOCTYPE HTML—

<p> This is the <small> Small Text </small> </p>

</html>

<hr />:

The < hr / > element creates a horizontal rule across the page.

<!DOCTYPE HTML—

<hr />
<P> Above & Below display the horizontal Line</P>
<hr />

</html>