Selectors and Sintax

Coding (Css 3)

Feb 27, 2017

Basic tutorial for beginner about the sintax of the selectors and how to style the element, class and id in CSS


In the context of the CSS3, the module dedicated to the selectors is currently the one more stable and mature.



Not only the specification has reached the status of an official recommendation, but the full range of expected selectors (minor exceptions) enjoys the support of all major browsers.



So in this tutorial we begin with the four basic selectors.



The universal, the elements selector, the classes selector and the id selector



Universal Selector



In css the universal selector is defined syntactically by an asterisk: *.



Its function is to select all items in a document.



The following sintax therefore gives the an underline to the text of any element represented in the document tree:



* {text-decoration: underline;}






Element selectors



The sintax to represent element selectors is through the name of a specific HTML element. They are used to select all the elements of that specific type in a document.



Observe this code snippet:



h1 {font-style: normal;}

p {font-style: italic;}

li {font-style: oblique;}



With the h1 selector we select all h1 titles, with p all paragraphs, with the li selector all the list item, regardless of whether the list is ordered or unordered. Each element we assign a different color for the text.






Class selectors



As I've shown in the previous CSS tutorial, to every HTML element you may be assigned a class using its html attribute and assigning it a value of our choosing:



<h1 class = "title"> Text </ h1>



It is also possible to assign more then one class for each element. Simply define them in separating code with a space:



<h1 class = "title yellow head"> Text </ h1>



As well as a single class can be assigned to more than one element:

<h1 class = "subtitle"> Text </ h1>

<h2 class = "subtitle"> text </ h2>



In css, to select the items which a class has been assigned, we use to call a selector using this syntax:

.title{text-align: center}



The names of the selectors are preceded by a period (.) the sintax just saw sets the alignment for all elements with class title.



You can also define a rule that goes to limit the action of these selectors. In practice, if we assign a multi-unit class, we can create a rule that acts only on certain types of elements and not on others. Resume and modify the above example. This is the HTML code:



<h1 class = "right"> This text is in a  h1  with .right  and it will right-aligned. </ h1>

<p class = "right"> This text is in a paragraph with .right  and will not be right-aligned because we assign the right-aligned only to securities h1 with  .right </ p>

<p> This text is in a paragraph with .right and will not be right-aligned. </ p>



This is the CSS:



.right {text-align: right;}



We modify this part like this:



h1.right {text-align: right;}



In this way we select only h1 elements with .right selector



It remains to be a third scenario, that of multiple classes. For the new example we have this HTML code:



<h2 class = "caps subtitle"> This text will be red and capitalized. </ h2>

<p class = "subtitle"> This text is in a paragraph with .subtitle and will not be red. </ p>



And this is the CSS:



.subtitle.cap {color: red; text-transform: uppercase}



This command will apply styles set on all elements that are present (in any order) the names of the classes defined in the selector (title and upper case). The text of the paragraph will be red and not capitalized because only presents the class title.






ID selectors



Even id is a css universal attribute in HTML.



It means that all elements in the document may have their own id. Unlike classes, however, a specific id can only be assigned to an element. We can not have an HTML document such a situation:



<h2 id = "cover"> </ h2>

<p id = "cover"> </ p>



In CSS, to select an item that has been assigned a certain id, use this syntax, by preceding the id value from the hash sign (#):




You can also use the hash sign before the element name:






In the example the <h2 id = "cover"> will have yellow text because we set this CSS rule:



#cover {color: yellow}



If you like this content and you are hungry for some more join the Facebook's community in which we share info and news just like this one!

Other posts that might interest you

Coding (Css 3) Dec 13, 2017

Introduction to css

See details
Get my free books' review to improve your skill now!
I don't want to improve