DEV Community

Cover image for Properties And Selectors
enigma6174
enigma6174

Posted on

Properties And Selectors

A good developer writes good code but a great developer writes great CSS rules (that is what I keep telling myself!). A well designed application can do wonders for a business, generate repeat customers and spread by word of mouth alone. It is kind of like those fancy restaurants which have great decor (apart from their offering) and why would one not keep going there even if it's just for the ambience?

That being said, designing a good website requires one to write great CSS (of course, JavaScript, back-end etc. are all there but here the focus is on CSS) and great CSS comes from a solid knowledge of being able to apply the right selectors with the correct properties.

The most common problem that many beginners face is apply CSS rules on a hit and trial basis till they get something that just works

What Are Selectors?

A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them. The element or elements which are selected by the selector are referred to as the subject of the selector.

Consider the following examples

p {
  background: red;
}

#main-header {
  font-family: serif;
}

.card-body {
  border: 1px solid red;
}
Enter fullscreen mode Exit fullscreen mode

In the above examples p, #main-header and .card-body all are different types of selectors. They tell the respective CSS rule which part of the HTML document to select and modify with those rules and hence the name selectors. The HTML elements targeted by these selectors are:

  • The first CSS rule targets all paragraph elements.

  • The second CSS rule targets an HTML element whose id is #main-header (semantically speaking, the attribute id should be unique to every HTML element).

  • The third CSS rule targets all those HTML elements that have a class of .card-body (semantically speaking, multiple HTML elements can have the same class).

Let us have a look at some of the main selectors that we can use

Element Selectors

These are the selectors that are used to select the HTML elements directly for example a div a paragraph an h1 etc. They are specified with the keywords like p for <p> div for <div> and h1 for <h1> and so on.

For example

div {
  margin: 2px;
  padding: 2px;
}
Enter fullscreen mode Exit fullscreen mode

Class Selector

Class selectors can be used to select multiple HTML elements that share the same class. Classes are not unique to HTML documents and therefore these come useful when the same CSS rule needs to get applied to multiple HTML elements. Class selectors start with the period symbol . followed by the class name.

For example

<div class="card-body">
  <h2>Card Title</h2>
  <p>This is card body</p>
</div>

<section>
  <div class="card-body">
    <h2>Card Title</h2>
    <p>This is card body</p>
  </div>
</section>
Enter fullscreen mode Exit fullscreen mode
.card-body {
  margin: 2px;
  padding: 2px;
}
Enter fullscreen mode Exit fullscreen mode

Id Selector

The CSS ID selector matches an element based on the value of the element’s id attribute. In order for the element to be selected, its id attribute must match exactly the value given in the selector. Semantically speaking, every id must be unique to a given HTML element. If we have two <div> elements in a document, they should not have the same id. Id selectors start with the pound/hashtag symbol # followed by the id name.

For example

<div id="first-card">
  <h2>Card Title</h2>
  <p>This is card body</p>
</div>

<section>
  <div id="second-card">
    <h2>Card Title</h2>
    <p>This is card body</p>
  </div>
</section>
Enter fullscreen mode Exit fullscreen mode
#first-card {
  background: red;
  margin: 2px;
  padding: 2px;
}

#second-card {
  background: blue;
  margin: 8px 4px;
  padding: 4px 2px;
}
Enter fullscreen mode Exit fullscreen mode

Attribute Selector

The CSS attribute selector matches elements based on the presence or value of a given attribute. Attributes are the extra keywords that we specify inside an HTML tag.

For example, <button disabled> is a button element and disabled is an attribute. Similarly <a title="url"> is an anchor element and title is an attribute. Attributes are selected by enclosing them inside square brackets [ ] and may be preceded by characters identifying the attribute.

Consider these examples

/* <a> elements with a title attribute */
a[title] {
  color: purple;
}

/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

/* <a> elements with an href containing "example" */
a[href*="example"] {
  font-size: 2em;
}

/* <a> elements with an href ending ".org" */
a[href$=".org"] {
  font-style: italic;
}

/* <a> elements whose class attribute contains the word "logo" */
a[class~="logo"] {
  padding: 2px;
}
Enter fullscreen mode Exit fullscreen mode

NOTE
While there are more selectors out there, there is one more worthy to know about called the universal selector and denoted by * and it selects everything in the HTML document. We rarely use it however unless we want to specify some very specific properties for the whole document (like margin, spacing etc.)

The following references should help you get a quick picture

element and class selectors

id and attribute selectors

Properties

Properties are the keywords that we specify inside the CSS rules that finally get applied/modified in the HTML elements. They are present on the left hand side of the : inside a CSS rule and the keywords on the right are called as values.

Consider the code snippet below

div {
  background: red;
  border: 1px solid red;
  margin: 2px;
  padding: 2px;
}
Enter fullscreen mode Exit fullscreen mode

Here, the keywords background, border, margin and padding are properties and the keywords like red, 1px solid red, 2px are values to these properties. When the rule gets applied, the <div> element will have a red background with a solid red border and some outer and inner spacing (specified by margin and padding).

A quick reference on selectors, properties and values

quick reference image on selectors, properties and values

Different types of values

different types of values

A Complete Example

Consider the following CSS bleow

body {
  font-family: "Ubuntu", sans-serif;
}

#product-overview {
  background: #ff1b68;
}

.section-title {
  color: #2ddf5c;
}

#product-overview h1 {
  color: white;
  font-family: "Poppins", sans-serif;
}

/* Common style for every button */
button {
  width: 130px;
  border: 2px solid red;
  margin: 10px;
}

/* Style specific to "button-section" class */
.button-section {
  border: none;
  background: rgb(206, 36, 36);
  color: white;
  font-family: "Ubuntu", sans-serif;
  font-size: 16px;
  padding: 5px 2px;
}

/* Style specif to disabled buttons */
[disabled] {
  border: none;
  background: rgb(99, 155, 197);
  color: black;
}
Enter fullscreen mode Exit fullscreen mode

This is the HTML code and below is the output

html code

html output

Useful Links

This completes our discussion on CSS properties and selectors and hopefully by now, you are confident enough to work with these. Feel free to voice your opinions in the comments below!

For the complete CSS and HTML code examples, you can access my Github repo (remember to check the folder selectors for this code)

GitHub logo enigma6174 / css-course

A collection of resources to help learn CSS

Understanding CSS

If you liked this article and want to stay updated with more such articles, support me by following me on DEV and Twitter

I write about web development, AI, cloud, entrepreneurship, technology and anything else that excites me!

Discussion (0)