Creating a website and filling it with certain elements of a web page, everyone will face a term such as CSS-selector.It serves to most accurately determine all the elements of html-file of their design and location on the page.To do this, create a CSS-a document that spells out certain selectors and their formatting options: color, size, position, and other.Every web designer should know and be able to properly enter the dates of selectors.They are divided by type, the main of which we discuss below.
Types selectors in CSS
Depending on to what html-element applies formatting, CSS-selector may refer to one of the following groups:
- selector tags;
- class selector;
- id-selector;
- selector attributes.
tag selector
It is also called "type selector" and "on the item", it is the most simple and common.As his CSS-document are the names of the elements html-file which we describe.For example, if we need to set the paragraph style, we specify the properties and their values for the element p {background: x;color: y;size: z}.In this case, all paragraphs web page will have the same format (background color, text size and the like. D.).
class selector
But what if you need to ask your every paragraph is different from other styles?For this purpose there is a class selector.
CSS-document in this case, will contain an entry similar to the following: p.first {color: x;font-size: y}.Thus, we define the properties of "color" and "size" only for a paragraph of class first.
in html-document in this case, enter the class attribute to the name of the style first.Classes can be as much as the style you want to apply for web page elements.
selector id
Often there is a need to define the style more precisely, for example to any one element of a page or in their sample.In this situation, the aid comes id-selector.The html file assign a desired item name that identifies it among the others.For example, the element that we want to set a style different from the others, will headline article.
Then assign html-document header h1 identifier, such articlename.And in the CSS-file to set the style, adding to the name identifier grille: #articlename {color: blue;text-align: center}.Now our headline will be the color blue and centered.
Each of the above types can be called "a simple CSS-selector."They define the formatting for a particular parameter html-document: together similar elements (for example, all paragraphs of the article), one class (for example, only the first paragraph) or a specific item (for example, the title of the article).
selector attributes
addition to the above, there are CSS-in attribute selectors - a more sophisticated way to use styles.It allows html formatting elements of a selected attribute or value.There are several varieties of this selector:
- by the presence of an attribute;
- on its exact value;
- on partial attribute value;
- of its particular value.
Let us consider each of these varieties:
- first case.Formatting is applied if there is a specific attribute in the html-code (it can be p, div, header, etc.).If it is not, it uses a generic for all elements of the style.For example, elements having the title (tooltip).
- second case.The style applies only to the html-elements that are an exact match attribute values.For example, to those elements of input, where the value of the type attribute equal to submit.
- third case.Under the format will only include items in the list of values that has a certain word.For example, sideBar attribute "class" in the elements div.
- fourth case.Style is defined only for those elements html-document in which a particular attribute has a certain value, and begins with him.For example, the use of the specified color to all elements, attributes which the English language (it can be en, en-rus, en-au and so on. D.).
Thus, using one or another CSS-selector can best be placed in a whole web page, and describe some of its elements.
