3 HTML Selector and Examples

Html selector Like Pseudo element, Attribute selector and Combining selector Html provides you elements to customize and stylize your content.A Tutorial with examples html selectors.

3 HTML Selector and Examples

Pseudo elements HTML Selector

You know all about pseudo classes, and pseudo elements are similar. Pseudo elements can be used to select parts of an element that you can not conveniently wrap in a or a span or select in other ways in html selector category. For example Pseudo element which is html selector.The first-letter pseudo element can be used to select the first letter of the text in a block element, allowing you to create effects like initial caps and drop caps. There is one another pseudo element called first-line, which you can use to select the first line of a paragraph as html selector. Here is how you would use both to select the first letter and line of a

element with Pseudo element as html selector.

P:first-letter {
   Font-size: 3em;
P:first-line {
  Font-style: italic;
}

Pseudo element use the same syntax as pseudo classes.

Here we are making the first letter of paragraph large and the first line italic.

Attribute selectors HTML Selector

Attribute selectors are not currently well supported in current browsers. However, they could be more widely supported in the future as html selector. Attribute selectors are exactly what they sound like: selectors that allow you to select element based on attribute values in html selector. You use them like this.

Img [width] {border:  black  thin  solid;}
Img [height=”300”] {border:  red  thin  solid;}
Img [alt~=”flowers”] {border:  black  thin  solid;}

This selector selects all images have a width attribute in their XHTML

This selector selects all the images that have a height attribute with a value of 300

This selector selects all the images that have an alt attribute that includes the word “flowers”

Selecting by siblings as html selector

You can also select elements based on their preceding siblings. For example, say you want to select only paragraphs that have an element preceding them, then you would use this html selector.

H1+p [
   Font-style: italic;
}

Write the preceding element , a “+” sign and then the sibling element.

This selector selects all the paragraphs that come immediately sfter an element.

Combining selectors HTML Selector

You have already seen examples of how html selectors can be combined. For instance you can take a class selector and use it as part of a descendant selector , like this:

.blueberry p { color: purple;} Here we are selecting all paragraphs that are descendants of an element in the blueberry class.

There is a pattern here that you can use to construct quite complex selectors. Let’s step through how this pattern works.

(1)Start by defining the context for the element you want to select , like this.

Div#greentea > blockquote Here we are using a descendent html selector where a

with an id “greentea” must be the parent of the

(2)Then supply the element you want to select:

Div#greentea > blockquote p Next we add the
element as the element we want to select in the context of the

the
element must be a descendent of

, which must be a child of a
with an id of “greentea”.

Then specify any pseudo-classes or pseudo-elements.

Div#greentea > blockquote p:first-line { font-style: italic;} That is a quite complex html selector. Feel free to construct your own selectors using this same method.

Then we add a pseudo-element, first-line to select only the first line of the paragraph.

So above html selectors put some light on use of pseudo element html selector,Attribute selector as html selector and combining selector as html selector and many other selectors with examples.