CSS Selectors || Bcis Notes

CSS Selectors

CSS selectors are used to selecting the content you want to style. Selectors are the part of the CSS ruleset. CSS selectors select HTML elements according to its id, class, type, attribute, etc. There are several different types of selectors in CSS.

i.   CSS Element Selector:

The element selector selects the HTML element by name.

CODE:

 

Result:

ii.  CSS Id Selector:

The id selector selects the id attribute of an HTML element to select a specific element. An id is always unique within the page so it is chosen to select a single, unique element. It is written with the hash character (#), followed by the id of the element.The CSS rule below will be applied to the HTML element with id=”para1″:

Syntax: #idname
Example: #toc will match the element that has the ID “toc”.

CODE:

 

Result:

 

iii.  CSS Class Selector:

The class selector selects HTML elements with a specific class attribute. It is used with a period character. (full stop symbol) followed by the class name.

Syntax: .classname
Example: .index will match any element that has a class of “index”.

CODE:

 

Result:

 

iv.  CSS Universal Selector

Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces.

Syntax: * ns|* *|*
Example: * will match all the elements of the document.

CODE:

 

Result:

v.   CSS Group Selector

The grouping selector is used to select all the elements with the same style definitions. Grouping selectors are used to minimizing the code. Commas(,) are used to separate each selector in a grouping.

Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

CODE:

 

Result:

 

You may also like: CSS Syntax

2 comments

  1. Sade Trudo

    The next time I read a blog, Hopefully it won’t disappoint me as much as this particular one. I mean, I know it was my choice to read through, nonetheless I genuinely thought you’d have something useful to talk about. All I hear is a bunch of moaning about something that you could fix if you were not too busy looking for attention.

    1. Bcis Notes

      Hello sir, First of all, thank you for reading our blog and reaching out to us about your disappointment but it would be really nice if you could be specific about the problem with our site rather than throwing some fancy sentences. No offense, but this sounds like a way of seeking attention to us. Let’s give out constructive criticism and help each other. So, how about we talk about the real problem, okay?

Leave a Reply

Your email address will not be published. Required fields are marked *