Taking an element with css without using any attirbute - html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test 2</title>
<link href="./test2.css" rel="stylesheet" />
</head>
<body>
<article>First</article>
<article>Second</article>
<article>Third</article>
<article>Fourth</article>
</body>
</html>
I need to separate articles in only css file. Without adding any attirbutes or something. Without touching to this HTML file.
article[value = 'First'] {
color: red;
}
article:text('First'){
color: red
}
article[text$="Second"]{
color: red
}
I tried them and they are not working.


Use the :nth-of-type selector.
article:nth-of-type(2) {
background: red;
}
article:nth-of-type(5) {
color: blue;
font-weight: bold;
}
<article>First</article>
<article>Second</article>
<article>Third</article>
<article>Fourth</article>
<article>Fifth</article>
<article>Sixth</article>

Related

Text color doesn't change

I'm a total beginner at coding and my first problem I can't figure out is that when I use CSS sheet as a change of h1 and h3 color it basically doesn't change.
I tried to set a <h1> text color in CSS sheet and it didn't change.
body {
background-color: #EEEEEE;
}
h1 {
color: blue;
}
h3 {
color: blue;
}
hr {
border-color: grey;
border-style: none;
border-top-style: dotted;
border-width: 5px;
width: 5%;
}
<h1>H1</h1>
<hr/>
<h3>H3</h3>
That's my HTML code:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Kacper's Personal Site 💲</title>
<link rel='stylesheet' href='css/styles.css'>
</head>
<body>
<table>
for background color it works properly.

If you have created a separate file of CSS then link your CSS file to an HTML file like <head><link rel="stylesheet" href="style.css"></head>,see here https://www.freecodecamp.org/news/how-to-link-css-to-html/

When you use a separate CSS file, you need to link that CSS file to the html document.
<!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" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>H1</h1>
<hr/>
<h3>H3</h3>
</body>
</html>

Trying to add the Information emoji to webpage

I'm trying to add the white i on blue button information emoji to a webpage and I'm only seeing the i on a white background. Hoping someone can help.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset=“UTF-8”>
</head>
<body>
<p>For more information ℹ</p>
</body>
</html>

You missed the meta charset on the top. Don't forget to include that. Also from your question it seems like you missed the color style. Here's the full code
a {
color: #ffffff;
text-decoration: none;
font-weight: bold;
background-color: #00a6ed;
width: 2.5rem;
height: 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
border-radius: .5rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../css/global_styles.css" rel="stylesheet" />
<meta charset=“UTF-8”>
</head>
<body>
<p>i</p>
</body>
</html>

how to change properties of a different element if another div element is focused in css

I'm trying to create a square whereas if the square gets clicked the background color of body element gets changed. But the code doesn't seem to work.
Here are the code I used:
<!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">
<title>Document</title>
</head>
<body>
<div class = "square" tabindex="1">
</div>
</body>
</html>
.square{
width: 100px;
height: 100px;
background-color: red;
}
.square:focus body{
background-color: yellow;
}

You will need to use JavaScript to do this in the following way:
let sq = document.querySelector('.square');
sq.addEventListener('focus', ()=>{
document.body.style.backgroundColor = 'yellow';
});
.square {
width: 100px;
height: 100px;
background-color: red;
}
<!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">
<title>Document</title>
</head>
<body>
<div class="square" tabindex="1">
</div>
</body>
</html>

HERE WE GO!
use this in script:
function myFunction() {
document.body.style.backgroundColor= "yellow";
It will change pre-decided color to yellow
do not forget to call this fuction via button or link
customize button/link as you want
Check sample code below ---- Run snippet code
<!DOCTYPE html>
<!--code by alok shukla-->
<html>
<body style="background-color: red;">
<button type="button" onclick="myFunction()">Change Color</button>
<script>
function myFunction() {
document.body.style.backgroundColor= "yellow";
}
</script>
</body>
</html>

As #AHaworth pointed out it's not possible to go up in the hierarchy to select the parent element.
Probably the best solution is to use JavaScript as answered by Master Yushi.
However, there's sort of a CSS-only solution if you change a layout a bit. Using the general sibling combinator it's possible to select a sibling element if it comes somewhere after the .square in HTML. So you can add a new div to wrap the entire page inside it. And make .square position: absolute; and position it wherever you need it. It might or might not work for you depending on the page layout you need.
Here's a demo:
.square{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
.bg {
background-color: blue;
height: 100vh;
width: 100vw;
}
.square:focus ~ .bg {
background-color: yellow;
}
<!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">
<title>Document</title>
</head>
<body>
<div class = "square" tabindex="1">click me</div>
<div class="bg"> </div>
</body>
</html>

Also, one way of doing it is through JQuery. Firstly add JQuery plugin to your HTML code and then add this code to your script.
$(".square").click(function(){
$("body").css("background-color", "yellow")
});

Is this something you wanted? I have added [onclick="document.body.style.backgroundColor ='yellow'] after the body tag. I hope it works for you!
.square {
width: 100px;
height: 100px;
background-color: red;
}
.square:focus body {
background-color: yellow;
}
<!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" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="square" tabindex="1" onclick="document.body.style.backgroundColor ='yellow'"></div>
</body>
</html>

body background color only being applied to the element

Just deleted all the code to be easier to solve it maybe. The body background color is only applied to the elements but not the entire page.
body {
margin: 0;
background: blueviolet;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The 2021 Frontend Developer Crash Course</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<h1>mdada</h1>
</body>
</html>

Add body height or min-height
body {
margin: 0;
min-height:100vh;
background: blueviolet;
}
<body>
<h1>mdada</h1>
</body>

Live server not changing after updating my CSS in VSC

I am trying to use Visual Studio Code (VSC) to practice on. When I update my index.html file, the live server will change. When I update my style.css file, the live server will not change. Is something wrong with the way I'm doing CSS?
My code so far in index.html:
<!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">
<title>Product Landing Page</title>
</head>
<body>
<nav class="navbar">
<div class="logo">
<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/articles/health_tools/12_powerhouse_vegetables_slideshow/intro_cream_of_crop.jpg"
alt="logo"
class="logo-image">
</div>
<div class="links">
How it's Done
Available
Buy
</div>
</nav>
</body>
Code in style.css:
* {
margin: 0;
}
body {
background-color: white;
color: rgb(70, 69, 69);
font-family:Arial, Helvetica, sans-serif;
}
.navbar {
position: fixed;
top: 0;
min-height: 60px;
padding: 0px 20px;
width: 90%;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #ffffffee;
}

Issue 1
Import style.css with <link> tag inside <head> tag. For exapmle,
<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">
<title>Product Landing Page</title>
<link rel="stylesheet" href="style.css">
</head>
Issue 2
Maybe this is a typo:
❌background-color: #ffffffee;
✅background-color: #ffffee;

You haven't linked your style.css file with index.html so that is why it is not updating live. To do that create this code under Meta tag.
hope it resolves the issue.