When utilizing brackets to target HTML elements in CSS, the first element is not included in the selection

Struggling to style HTML elements with CSS

Background Information

  • I am currently learning front-end development and created a test page for practice.

Steps Taken So Far

  • In the main directory, I created a file called test.html and added the following code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/csstest.css">
    <title>Document</title>
</head>
<body>
    <p> text number one</p>
    <p class="test_class"> text number two</p>
</body>
</html>
  • Furthermore, I created a folder named css and within it, a file named csstest.css.
p [class = "test_class"] {color: red;}

Purpose and Attempts

  • I intended to select the text "text number two" and change its color to red using CSS.

  • While my original approach did not work as expected, I discovered that wrapping the text in a span element like this was successful:

<p><span class="test_class"> prueba numero dos</span></p>

Answer №1

It is much more convenient to utilize a class selector rather than an attribute selector in this case. For example:

p.test_class {color: red;}

However, if you still prefer to use an attribute selector, be cautious of whitespaces as they act as descendant selectors (for more information, refer to descendant selector):

p[class = "test_class"] {color:red;}

For further reference on CSS selectors, you can visit this helpful guide: css selectors

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Pause the automatic redirection in order to display an HTML page for a brief period

Is it possible to delay the redirection on a page with both PHP and HTML content? I have a page that redirects to another website using PHP, but I want to first display some HTML content before the redirect happens. Can this be achieved by adding a delay ...

Attempting to adjust table size in MPDF to fill the available height

I'm currently utilizing MPDF in order to create a PDF document from an HTML page that includes a table. My goal is to have the table expand to fill up the remaining space on the page. Here is the specific table I am working with: I want the final el ...

Generate a series of printed pages corresponding to various scroll positions using JavaScript

I have created an HTML page through a program that generates evidence. Exporting this evidence to a PDF format would be beneficial in many situations. This HTML document is divided into two columns, and I need to print multiple pages to PDF where each pag ...

developing a loading animation with progress indicator in CSS3

I have been working on creating a preloader, but I am having trouble embedding the percentage with the CSS circle. So far, I have tried various plugins without success. Can anyone help me with this issue? Here is my current progress. Below is the HTML co ...

Numerous scalable on/off switches

After experimenting with some code for toggling buttons that I found (thanks to @JohnieHjelm!), I managed to simplify it and incorporate it into my webpage successfully. However, the issue arises when dealing with more than one button. Initially, everythin ...

The mysterious behavior of HTML 5 causing images to mysteriously add a 3px margin at the

Whenever I update my website to <!DOCTYPE HTML> Each img element enclosed within a DIV mysteriously acquires a 3px bottom margin, even though no CSS rule defines it. To clarify, there are no style attributes responsible for this 3px bottom margin. & ...

The functionality of BASE64 encoding in HTML appears to be malfunctioning

I have exhausted all options in my attempt to display an image using a base64 string, but none of them seem to be working. I have tested it on IE6,7, Firefox 3. Can someone please point out what is wrong with the code below? <head> <STYLE type ...

wordpress website experiencing a logo consistency issue on mobile devices

Issue with displaying custom logo on mobile devices persists even after updating theme options. Since the default logo continues to appear, the next step is to locate the default logo in the theme coding and replace it with the desired custom logo specific ...

Dragging the identical li element from the div for the second time should not trigger a drag and drop action

After successfully dragging and dropping an element from <div id="catalog" > into a box, specifically <div id="dialogIteration">, on the first attempt everything works as expected. However, upon attempting to drag and drop the same element for ...

Gleaming personalized select input/selectize input

I am striving to customize my Shiny select input in the following ways: Eliminate the label Set a unique background color: #2f2d57 Include a placeholder Enable users to both type-in and select Despite my efforts, I have not been successful in alignin ...

Struggling to implement Bootstrap grid in a Rails project

I'm encountering a problem similar to what was discussed in Issue with Bootstrap grid in Rails (and other related threads), but the suggested solution isn't resolving my issue. Despite using Bootstrap 3 classes with the Bootstrap 3 gem, I'm ...

How can I properly showcase this JSON format in Angular 13?

In my JSON data, I have the following structure: response img. The classes I am working with are: export class Operation { operations?: (OperationDetail);//change by OperationDetail[] } export interface OperationDetail { id?: s ...

What is the best way to ensure that this form field remains hidden when the page is loaded?

In my Django project, I have a form that should only display the entity name on page load. However, it is currently showing both the entity name and quote text fields. The quote text field should only be visible when the entity name is not in the database. ...

I am unsure of the process for implementing an OnClick event to modify the colors of a square

Seeking guidance from the more experienced individuals here as I am just starting out. Any help would be greatly appreciated! This might seem simple to many of you, but for me it's quite challenging. This is how my HTML code looks: <html> < ...

Updating the progress bar without the need to refresh the entire page is

Currently, I have two PHP pages: page.php and loader.php. Loader.php retrieves data from MySQL to populate a progress bar, while page.php contains a function that refreshes loader.php every second. This setup gets the job done, but it's not visually a ...

Utilizing HTML templates efficiently without the need for a view engine

For a new application, we are implementing multiple servers for handling different functions - one server for delivering HTML files, another as a proxy to handle HTTPS requests, and a Java backend with a database. The view server should be simple, with an ...

Enhance the appearance of QTreeView items using a customized display delegate and CSS

In my QTreeView, I have a custom delegate set up for one of the columns to display a colored progress bar. The appearance of the progress bar depends on the content and I used the color information from option.palette to mimic the default delegate behavior ...

In PHP, my goal is to extract the XML ID when a button is clicked and display its contents on a separate page

I need assistance with extracting the ID from the hotellist.php page using XML. As I am relatively new to XML, I am unsure of how to achieve this. Can someone please provide a detailed explanation? <?php $xml=simplexml_load_file("data.xml") or die("Err ...

What are the steps to upgrade to Bootstrap 4 in Laravel 5.5?

I am looking to transition to Bootstrap 4 in Laravel 5.5, Previously, I ran: composer require laravelnews/laravel-twbs4 However, I encountered layout issues in my "auth view" so I tried this: php artisan preset bootstrap4-auth Unfortunately, the p ...

Using jQuery does not automatically pre-check multiple checkboxes. This issue may arise when using PHP and AJAX together

I'm attempting to dynamically check multiple checkboxes based on previous entries from a MySQL database. I have the data stored in a variable: var = ObjektLevHur; The potential data values are: frittlev, frittfabrik, or mont. When I make my first sele ...