Advanced Guide: Selectors, classes, and how to use them

What you’ll learn:

What is a selector

How to use a class

Everything in the BOWWE Builder is editable, but sometimes you need to check under the hood to make some additional adjustments. This feature is aimed at more advanced users with some knowledge of CSS and HTML.

What is a selector

Selectors are targetable parameters of HTML code that we can use to access hidden elements or to broaden the spectrum of widgets affected by your changes. By addressing a specific attribute or series of attributes you can get access to hidden elements, create new ones, or invoke multiple elements at the same time granted the selector applies to all of those elements.

We can create our selector with certain elements, most notably classes. Selectors can also include IDs, HTML elements, HTML attributes, pseudo-classes, and pseudo-elements. Combining this with CSS Combinators we can create specialized selectors ranging from wide to extremely specific.

Selector

Example

Description

.class

.name

Select all elements with class=”name”

.class1.class2

.name1.name2

Select all elements containing both .name1 and name2 within their class attribute

.class1 .class2

.name1 .name2

Select all elements with class attribute “name2” that lay inside all elements with

#id

#1234567890

Select the element with a unique identification number

.name1 *

Select all elements within element with class “.name1”

element

div

Select all <div> elements

element.class

div.name1

Select all divs with class name1

element element

div p

Select all p elements inside all div elements

class1,class2

.name1,.name2

Select all elements with class name1 and all elements with class name2

class1 > class2

.name1 > .name2

Select all name2 elements that are direct descendants of all name1 elements

class1+class2

.name1+.name2

Select the first name2 element that is placed immediately after name1 element

class1~class2

.name1~.name2

Select every name2 element preceded by name1 elements

[attribute]

[target]

Select all elements with a target attribute

[attribute=value]

a[href=”bowwe.com”]

Select all links containing “bowwe.com” address

:hover

name1:hover

Select all name1 elements that are hovered over by a mouse cursor

:first-child

li:first-child

Select the first child of its parent among other siblings

:nth-child()

p:nth-child(2)

Select any <p> element that is a second child of its parent

::before

.name1::before

Select a pseudo-element of elements with class name1

To learn more about pseudo-elements we recommend checking this tutorial:

Learn more

Advanced guide: Pseudo-elements

How to use a class

Selectors are mostly used to access elements based on custom criteria. Most notably we use selectors in BOWWE to apply classes to our elements so that we can style multiple elements at once and keep our code clean with no unnecessary duplications. A smaller style library will improve your page’s loading time substantially and this method of styling is more than recommended in Responsive Web Design (RWD). Let’s demonstrate our selector usage by creating our own class.

Inside your project go to the widgets panel and select empty columns.

Drop them to your project.

Now let’s add areas for each column. Go to the widgets panel and select an area.

Drag it and drop it into a column.

Repeat it for other columns as well.

Now we’re gonna access one of our areas and click on the styles icon.

Go to the selector tab.

You’ll see a window where you can write your selector. You can choose from existing classes and elements, but you can create your own classes as well. Let’s write .ourFirstClass in the panel.

Note:

The dot at the beginning of the class name is not a mistake. This indicates that the name is supposed to be a class and is properly understood by the CSS code.

Now click on the “Add New Class” button.

We are now inside the created class and any change now will be applied exclusively to that class. Let’s change some paddings inside the area, change the background color, and add a border-radius. We can always come back to that class when we write its name in the selector window.

Now we will add this class to another area. Select styles of the other area like before and go to the selector tab.

Now we will search for ourFirstClass and add this selector to that element.

It should now say that two elements possess this class. Both now have the same paddings.

Remember:

You can always come back to the created class and edit styles inside, both existing and new ones. To do this you need to go back to the selector tab and select from the list or write it down again.

Note that the selected widget will display in first order all the classes it has and after that the rest, so choosing the widget with desired class to edit will display that class at the beginning of the selector list.

⚡ BOWWE Expert Tips:

Try not to edit default classes if you don’t know where they are used and for what purpose, since this edition has a potential to drastically change the look of the page and could break it.

Using classes can greatly improve your website building time as well as your maintenance time. The biggest improvement however can be seen in the website positioning and overall SEO, placing your page higher in the ratings thanks to the clearer CSS file.

There are many more ways to use classes and selectors, such as adding decorations using pseudo-elements but everything is based on HTML and CSS rules and is compatible with selector web rules.

Congratulations!

Now you know what are selectors and classes!

Advanced Guide: Selectors, classes, and how to use them

What is a selector

How to use a class

Note:

Remember:

Dedicated to you

How to set up a Blog in less than 1h in BOWWE?

How to make an online Portfolio in BOWWE?

How to generate images with AI in BOWWE?

Can't find what you're looking for?

3 years for less than 1 year

$723