When creating styles with CSS it is common to attach .classes and #ids to DOM elements so that we can reference them in the CSS file. We can also just use element names directly to apply styles, and there are many more selectors we can use.
In this video tutorial, I walk through a semantic approach to creating styling in Ionic 2. This style relies more heavily on using the semantic structure of the template to apply styles, rather than adding classes and IDs.
Here’s the video:
Video Notes
- Since Ionic 2 uses SASS, it means that we can nest CSS selectors inside of each other
- Nesting allows you to more easily use a semantic approach to select elements in a certain section of the template
- Specificity is an important concept in CSS, where the more specific rule will get applies in a scenario where two rules clash. Styles applied on a
div pselector would beat the same styles applied on apselector, for example. - You are not limited to just using the element name as a selector, you can also use things like attributes and values to select elements.