CSS Selectors

//CSS Selectors
­

Type, Class and ID selectors

Basic selectors such as tag, id and class selectors

July 2nd, 2016|Categories: CSS Selectors, HTML and CSS Intro, Learn HTML and CSS|Tags: , |

Attribute selectors

Introduce the attribute selector.

July 17th, 2016|Categories: CSS Selectors, Learn HTML and CSS|Tags: , |

Combining Selectors

Introduce how to combine different selectors to select elements with more flexibility.

July 18th, 2016|Categories: CSS Selectors, Learn HTML and CSS|Tags: , |

Pseudo-classes

Change the style based on element states using pseudo-classes.

July 23rd, 2016|Categories: CSS Selectors, Learn HTML and CSS|Tags: , |

Type, Class and ID selectors

Introduce the three common CSS selectors

July 3rd, 2016|Categories: CSS Selectors, HTML and CSS Intro, Learn HTML and CSS|Tags: , , |

The [attribute] selector

A selector that returns elements with a spcified attribute

July 17th, 2016|Categories: CSS Selectors, Learn HTML and CSS|Tags: , , |

The [attribute=”value”] selector

A selector returns all the elements that contains the specified attribute of a specified value

July 17th, 2016|Categories: CSS Selectors, Learn HTML and CSS|Tags: , , |

The [attribute~=”value”] selector

A selector returns all the elements that contains the specific attribute value that contains a specified word

July 17th, 2016|Categories: CSS Selectors, Learn HTML and CSS|Tags: , , |

The [attribute|=”value”] selector

A selector returns all the elements containing the specific attribute value of a specified word or starting with it followed by a hyphen(-)

July 18th, 2016|Categories: CSS Selectors, Learn HTML and CSS|Tags: , , |

The [attribute^=”value”] selector

A selector returns all the elements containing the specific attribute value starting with a specified word

July 18th, 2016|Categories: CSS Selectors, Learn HTML and CSS|Tags: , , |

The [attribute$=”value”] selector

A selector returns all the elements with the specific attribute value that ends with a specified partial

July 18th, 2016|Categories: CSS Selectors, Learn HTML and CSS|Tags: , , |

The [attribute*=”value”] selector

A selector returns all the elements with the specific attribute value that contains a specified partial

July 18th, 2016|Categories: CSS Selectors, Learn HTML and CSS|Tags: , , |

Combine attribute selectors with basic selectors

Exampe to combine type, id, class selectors with attribute selectors.

July 18th, 2016|Categories: CSS Selectors, Learn HTML and CSS|Tags: , , |

Descendant Selector example

Example of how to select the elements inside a specified element.

July 18th, 2016|Categories: CSS Selectors, Learn HTML and CSS|Tags: , , |

General Sibling Selector

Example of how to select the sibling elements of selected elements.

July 18th, 2016|Categories: CSS Selectors, Learn HTML and CSS|Tags: , , |

Adjacent Sibling Selector

Example of how to select the first following elements of selected elements.

July 18th, 2016|Categories: CSS Selectors, Learn HTML and CSS|Tags: , , |

Child Selector example

Example of how to select the children of an element.

July 18th, 2016|Categories: CSS Selectors, Learn HTML and CSS|Tags: , , |

Select elements from multiple selectors

Assign the same set of properties to multiple selectors.

July 18th, 2016|Categories: CSS Selectors, Learn HTML and CSS|Tags: , , |

Link-related pseudo class selectors

Change styles of a link based on its state.

July 23rd, 2016|Categories: CSS Selectors, Learn HTML and CSS|Tags: , , |

Input related pseudo-classes

Change styles of form elements based on element states.

July 23rd, 2016|Categories: CSS Selectors, Learn HTML and CSS|Tags: , , |